react中使用redux进行状态存储

1. 安装redux、react-redux

npm install redux
npm install react-redux 
//为了防止不小心修改state中的数据引入immutable，变成不可修改的数据
npm install immutable
npm install redux-immutable

2.在外层App.js中引入Provider

3.在组件中引入connect来进行store中数据的接收和派发改变

import { connect } from 'react-redux';
// 修改export部分的代码
export default connect(mapStateToProps, mapDispatchToProps)(Header)

4.创建store的文件夹，创建index.js 和reducer.js两个文件

index.js
reducer.js

使用redux-immutable之后，在store中获取header就不是使用简单的state.header了而是state.get(‘header’);

5.在header组件中新建header组件的store状态存储
reducer.js

// 安装immutable组件之后
import { fromJS } from 'immutable';
// formJS的用法如下，将state总存储数据变成不可改变的数据
// 当使用formJS之后用state.set('focued', true)来返回新state的对象
// 同理组件中只用的时候要使用get的方法获取该值。
state.get('focued')

6.新建actionType.js来存储type的常量

7.新建creatAction.js来进行数据的派发

在组件中引入

派发type

8.通过调用props中的数据进行应用