React Redux

Redux

　　是JavaScript的一个状态容器　

　　1、首先应用中state是一个对象树的形式存储在单一的store中

　　2、唯一能改变state的是触发action

　　3、reducer接受action，通过return newStore改变store数据

　　4、state数据发声改变通知Component重新render

具体流程

首先创建一个store文件夹---> index.js

import { createStore } from "redux";
import reducer from "./reducer";

let store = createStore(
    reducer
   );
}
export default store

创建reducer.js  

const defaultState = {
  inputValue:'123',
  list:[1,2,3]
}

export default (state = defaultState, action) => {
  return state
}

　　我们现在创建了store和reducer 

 　　store 是一个仓库，不会处理数据，reducer可以接受state和action进行数据操作返回newState，但是reducer可以接受state的值，不能修改state的值

接下来组件中引用　

import store from './store'

获取store中的值

this.state = store.getState()

　　到此我们可以获得store中的值　　

　　　　我们来整理思路，首先我们先创建一个store 公共仓库

　　　　然后创建reducer存储应用中的所有数据

　　　　然后store引用reducer，那么store可以获取reducer中的数据

　　　　此刻Store有数据了，那么Component可以通过getState获得数据

开发工具

　　谷歌浏览器安装Redux DevTools

　　修改index配置即Store，是插件生效

import { createStore } from "redux";
import reducer from "./reducer";
let store;

if(window.__REDUX_DEVTOOLS_EXTENSION__) {
  store = createStore(
    reducer, /* preloadedState, */
    window.__REDUX_DEVTOOLS_EXTENSION__()
  );
} else {
  store = createStore(
    reducer
   );
}
export default store

　　现在我们可以通过redux查看state数据变化　

插件安装完成，那么我们要开始修改state的值，而且上面说了state的值只能通过action修改　

const action = {
  type:"change_input_value",
  value:e.target.value
}
store.dispatch(action)

　　首先我们创建一个action，然后通过dispatch告诉store我们将要改变数据，reducer接受传递过来的state和action 代码如下

export default (state = defaultState, action) => {
  if (action.type==='change_input_value') {
    const newState = JSON.parse(JSON.stringify(state))
    newState.inputValue = action.value
    return newState
  } 
  return state
}

　　*reducer能接受state，不能修改state

　　return newState来改变store中的数据

　　store中的数据发生变化那么我们告诉组件数据发生变化重新render

　　在组件中store订阅，store数据发生变化，subscribe函数就会自动执行，然后改变state->render

store.subscribe(this.handleStoreChange)

handleStoreChange(){
  this.setState(store.getState())
}

ActionTypes.js　　

　　拆分

　　新建一个actionTypes.js文件

export const CHANGE_INPUT_VALUE = 'change_input_value'

actionCreator统一创建action

　　首先创建actionCreator.js

import * as types from './actionTypes'

export const getInputChangeAction = value => ({
  type: types.CHANGE_INPUT_VALUE,
  value
})

　　组件Component中修改如下

const action = getInputChangeAction(e.target.value)
store.dispatch(action)

　　以上是提高代码的可维护性

redux的三大基本原则

　　单一数据源   store必须唯一的

　　State是只读的  只有store改变自己的内容

　　使用纯函数来执行修改  Reducer 是接受state和action，返回一个newState

核心API

　　createStore

　　store.dispatch

　　store.getState

　　store.subscribe