react中使用redux进行状态存储

安装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中的数据进行应用