redux实现数据存取的简单写法，简单的写了一下，相信你应该可以看得懂的_最简洁的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
2
3
4

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
2
3
4
5
6
7
8
9
10
11
12

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 (
      <div>
        One组件
        {this.state.value} //取数据之后进行渲染
      </div>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18