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中的數據進行應用