reactredux中如何获取store数据并将数据渲染出来.docx

第

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

目录前景提要1.创建仓库骨架并书写初始代码2.正式开始3.store数据获取方法（可略过）4.数据的获取与展示

前景提要

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

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

未使用react-redux管理工具

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

src目录下创建

//store/index.js代码

import{createStore}fromredux;

importreducerfrom./reducer

conststore=createStore(reducer);

exportdefaultstore

//store/reducer.js

constreducer=(prevState,action)={

letnewState={...prevState}

returnnewState

exportdefaultreducer

2.正式开始

关键点在于reducer.js文件

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

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

//store/reducer.js

letstate={

todos:[

id:1,

title:今天周一,

isFinished:false

id:2,

title:今天周二,

isFinished:true

constreducer=(prevState=state,action)={

letnewState={...prevState}

returnnewState//将新的数据返回出去

exportdefaultreducer

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

3.store数据获取方法（可略过）

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

//在任意页面（view）引入该store

importstorefrom./store

console.log(store====,store)

效果图：

这是该store的方法

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

importstorefrom./store

console.log(store.getState())

4.数据的获取与展示

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

importReact,{Component}fromreact

importstorefrom../store//引入

exportdefaultclassOneextendsComponent{

constructor(){

super()

this.state={

todos:[]//一定要定义一个初始值

componentDidMount(){

this.setState({

todos:store.getState().todos//将获取到的数据里面的内容赋值给该页面state

//页面初次渲染的时候什么都没有，在这里获取并修改数据

//使得页面重新渲染，拿到数据

render(){

return(

div

this.state.todos.map(item={//这里就是展示了

return(

ulkey={item.id}

li{item.id}/li

li{item.title}/li

/ul

/div

效果图：

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