react redux中如何获取store数据并将数据渲染出来

 更新时间:2022年08月04日 14:12:21   作者:web前端 zxp  
这篇文章主要介绍了react redux中如何获取store数据并将数据渲染出来,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

前景提要

如果不了解基础的话 ----- 点击此处

本文着重实现效果,不会讲太多原理问题

未使用 react-redux 管理工具

1.创建仓库骨架并书写初始代码

src 目录下创建

//store/index.js 代码
import { createStore } from 'redux';
import reducer from "./reducer"
const store = createStore(reducer);
export default store
//store/reducer.js
const reducer = (prevState,action)=>{
    let newState = {...prevState}
    return newState
}
export default  reducer

2.正式开始

关键点在于 reducer.js 文件

它是一个纯函数,在不修改原始值的情况下返回一个新的数据

现在我们返回一个新的数据给 store(仓库)

//store/reducer.js
let state = {
    todos:[
        {
            id:1,
            title:"今天周一",
            isFinished:false
        },
        {
            id:2,
            title:"今天周二",
            isFinished:true
        }
    ]
}
const reducer = (prevState = state,action)=>{
    let newState = {...prevState}
    return newState   //将新的数据返回出去
}
export default  reducer

因为并没有数据传递过来,所以我们用一个默认的数据来代替,然后把它给一个新的数据再传出去(store会自动接收return 的数据)

3.store 数据获取方法(可略过)

既然前文已经返回数据,那我们就看看返回来的数据的样子

//在任意页面(view)引入该store
import store from './store'
console.log("store====",store)

效果图

这是 该 store 的方法

通过 getState()方法来获取数据

import store from './store'
console.log(store.getState())

4.数据的获取与展示

上文中 通过 store.getState()获取到了参数,那么我们就可以把获取到的参数赋值给现在的 组件的 state

import React, { Component } from 'react'
import store from '../store'    //引入
export default class One extends Component {
    constructor(){
        super()
        this.state = {
            todos:[]  //一定要定义一个初始值
        }
    }
    componentDidMount(){
        this.setState({
            todos:store.getState().todos   //将获取到的数据里面的内容赋值给 该页面 state
            							   //页面初次渲染的时候什么都没有,在这里获取并修改数据
            							   //使得页面重新渲染,拿到数据
        })
    }
    render() {
        return (
            <div>
                {
                    this.state.todos.map(item=>{   //这里就是展示了
                        return(
                            <ul key={item.id}>
                                <li>{item.id}</li>
                                <li>{item.title}</li>
                            </ul>
                        )
                    })}
            </div>
        )
    }
}

效果图

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • react使用.env文件管理全局变量的方法

    react使用.env文件管理全局变量的方法

    本文主要介绍了react使用.env文件管理全局变量的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 详解webpack + react + react-router 如何实现懒加载

    详解webpack + react + react-router 如何实现懒加载

    这篇文章主要介绍了详解webpack + react + react-router 如何实现懒加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-11-11
  • 在react配置使用less的完美方案

    在react配置使用less的完美方案

    由于 create-react-app 使用 webpack 作为其模块打包器,你需要修改 webpack 的配置来支持 .less 文件,这篇文章主要介绍了在react配置使用less的完美方案,需要的朋友可以参考下
    2024-04-04
  • React使用Electron开发桌面端的详细流程步骤

    React使用Electron开发桌面端的详细流程步骤

    React是一个流行的JavaScript库,用于构建Web应用程序,结合Electron框架,可以轻松地将React应用程序打包为桌面应用程序,本文详细介绍了使用React和Electron开发桌面应用程序的步骤,需要的朋友可以参考下
    2023-06-06
  • React+TS+IntersectionObserver实现视频懒加载和自动播放功能

    React+TS+IntersectionObserver实现视频懒加载和自动播放功能

    通过本文的介绍,我们学习了如何使用 React + TypeScript 和 IntersectionObserver API 来实现一个视频播放控制组件,该组件具有懒加载功能,只有在用户滚动页面且视频进入视口时才开始下载视频资源,需要的朋友可以参考下
    2023-04-04
  • 解决React在安装antd之后出现的Can''t resolve ''./locale''问题(推荐)

    解决React在安装antd之后出现的Can''t resolve ''./locale''问题(推荐)

    这篇文章主要介绍了解决React在安装antd之后出现的Can't resolve './locale'问题,本文给大家分享解决方案,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 在create-react-app中使用sass的方法示例

    在create-react-app中使用sass的方法示例

    这篇文章主要介绍了在create-react-app中使用sass的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 一文带你搞懂useCallback的使用方法

    一文带你搞懂useCallback的使用方法

    useCallback是用来帮忙缓存函数的,当依赖项没有发生变化时,返回缓存的指针,而props涉及到复杂对象类型都是通过指针来传递到,下面这篇文章主要给大家介绍了关于useCallback使用的相关资料,需要的朋友可以参考下
    2023-02-02
  • 如何将你的AngularJS1.x应用迁移至React的方法

    如何将你的AngularJS1.x应用迁移至React的方法

    本篇文章主要介绍了如何将你的AngularJS1.x应用迁移至React的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 详解如何使用Jest测试React组件

    详解如何使用Jest测试React组件

    在本文中,我们将了解如何使用Jest(Facebook 维护的一个测试框架)来测试我们的React组件,我们将首先了解如何在纯 JavaScript 函数上使用 Jest,然后再了解它提供的一些开箱即用的功能,这些功能专门用于使测试 React 应用程序变得更容易,需要的朋友可以参考下
    2023-10-10

最新评论