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>
)
}
}
效果图:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
详解webpack + react + react-router 如何实现懒加载
这篇文章主要介绍了详解webpack + react + react-router 如何实现懒加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2017-11-11
React+TS+IntersectionObserver实现视频懒加载和自动播放功能
通过本文的介绍,我们学习了如何使用 React + TypeScript 和 IntersectionObserver API 来实现一个视频播放控制组件,该组件具有懒加载功能,只有在用户滚动页面且视频进入视口时才开始下载视频资源,需要的朋友可以参考下2023-04-04
解决React在安装antd之后出现的Can''t resolve ''./locale''问题(推荐)
这篇文章主要介绍了解决React在安装antd之后出现的Can't resolve './locale'问题,本文给大家分享解决方案,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
如何将你的AngularJS1.x应用迁移至React的方法
本篇文章主要介绍了如何将你的AngularJS1.x应用迁移至React的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-02-02


最新评论