redux中的state:

1.安装redux

$ npm i redux --save

2.进行引入：

import { createStore } from 'redux'

3.创建reducer进行管理

const defaultState = {
 list:[
 '早8点开晨会，分配今天的开发工作',
 '早9点和项目经理作开发需求讨论会',
 '晚5:30对今日代码进行review'
 ]
}
export default (state=defaultState,action)=>{
 return state
}

4.在仓库中进行引入：

import reducer from './reducer'

5.创建数据管理仓库并注入reducer并把仓库暴露出去:

const store = createStore(reducer)
export default store;

6.在组件中进行引入：

import store from './store'

7.获取到仓库中的数据

console.log(store.getState())

reducer中的action：

1.在组件中写个方法并创建action

test(){
 const action = {
	type:"getItem"
}

//把action派遣到仓库中

store.dispatch(action)

2.在reducer中根据action的type进行操作：

export default(state=defaultState ,action){
 // 在reducer中只能接收state但不能改变 （只读）,所以用newState 进行拷贝。
	let newState = state
 if(action.type === "getItem'' ){
 //模拟添加一条
 newState.list.push(newState.inputVal)
 //返回 newState其实就是实现仓库数据的更新
 return newState
}
}

3.在react老版本中，仓库进行了更新了以后，需要在组件中进行订阅（subscribe）。

class TodoList extends Component {
 constructor(){
 super()
 this.state = store.getState()
 this.storeChange = this.storeChange.bind(this)
 //订阅Redux的状态 改变仓库的状态
 store.subscribe(this.storeChange)
 }

4.在组件里面写一个方法storeChange，其实就是又去获取一下store的状态。

 storeChange(){
 // 需要使用this.setState()
 // getState是store的固定函数 获取状态
 this.setState(store.getState())
 }

5.actionType的优化方法：创建一个actionType的文件。

export const GET_ITEM = 'getItem'

6.在组件和仓库中进行引入和调用。

import {GET_ITEM } from './store/actionType'

优势：快速显示报错。

7.action方法的优化，建立单独的js文件，进行创建、并在组件中引用使用：

import {CHANGE_INPUT,ADD_VALUE,DEAL_ITEM} from './actionType'
 const changeInputAction = (value)=>({
 type:CHANGE_INPUT,
 value:value
 })
const addValue = () =>({
 type:ADD_VALUE,
})
const dealItem = (index) =>({
 type:DEAL_ITEM,
 index:index
})
export {
 changeInputAction,
 addValue,
 dealItem
}

组件中通过：const action = changeInputAction(value) 并 dispatch（action）

reducer需要注意的三点：

1.Store必须是唯一的

2.只有store能改变自己的内容，Reducer不能改变（通过return newState）

3.Reducer必须是纯函数。纯函数：如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。

react-redux 持久化 仓库配置（包含thunk，history,等）

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { routerMiddleware } from "connected-react-router";
//引入汇总之后的reducer
import createRootReducer from "./reducers";
import { createBrowserHistory as createHistory } from "history";
export const history = createHistory();
let composeEnhancer = compose;
//在localStorge中生成key为root的值
const persistConfig = {
  key: "root",
  storage,
};

if (process.env.NODE_ENV !== "production") {
  composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}
const router = routerMiddleware(history);
const myPersistReducer = persistReducer(
  persistConfig,
  createRootReducer(history)
);


const store = createStore(
  myPersistReducer,
  composeEnhancer(applyMiddleware(thunk, router))
);


export const persistor = persistStore(store);


export default store; //暴露出去

然后在App.js中进行引入

import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/es/integration/react'
import store, { persistor } from './redux/store/index'
import AppRouter from './router'
function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <AppRouter />
      </PersistGate>
    </Provider>
  )
}

export default App

然后往仓库存储一个数据，刷新，发现持久化Ok了，下课