redux实现数据存取的简单写法，简单的写了一下，相信你应该可以看得懂的

当我们创建了react项目之后 并安装了redux （我习惯用yarn安装 yarn add redux ） 了解一下 redux 状态管理工具

redux 三大原则

1-1 单一数据源（store是唯一的） 1-2 State是只读的（一旦修改就会产生新的状态） 1-3 使用纯函数来执行修改（同样的输入必定得到同样的输出。不能改变参数）

首先 在创建项目之后 的 src文件夹下创建store文件夹作为仓库，建立 index.js根文件

import { createStore } from 'redux' //引入createStore import reducer from './reducer'// reducer是修改状态的纯函数 在外部创建一个纯函数的reducer.js文件,引入进来 var store = createStore(reducer);// 把reducer传递赋值给store export default store;// 导出store

1-5 reducer.js文件 —rxd快捷样式 大致内容是

const initState = { value: 1 //这里是存数据的地方 } export default (state = initState, { type, payload }) => { switch (type) { //这个位置是改变数据的地方 ，暂时先不说，先看看怎么存取。后期补上怎么改变数据。 // case “TYPENAME”: // return { …state, …payload }//修改数据 default: return state } }

1-6 在src文件夹下建立One文件夹下在建一个一个组件 index.js 并引入到App组件中 ，渲染 在one组件中的index.js中 进行取数据 操作如下

import React, { Component } from ‘react’ import store from ‘…/…/store’ export default class One extends Component { constructor(props) { super(props) this.state = { value: store.getState().value ///这个地方就是取数据 也就是通过 getState取数据 } } render() { return (

One组件 {this.state.value} //取数据之后进行渲染 ) } }