Redux基础

1 Redux简介

Redux官方文档
安装
```
npm install --save redux
```

1594003759128.png

2 Redux 使用流程

1594004464974.png

新建store和reducer 目录结构如下：
- src (项目的源文件夹)
  - store (用于管理全局数据的文件夹)
    - index.js (定义store)
    - reducer.js (定义reducer)

编辑index.js

import { createStore } from 'redux'
import reducer from './reducer'

const store  = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

export default store

编辑reducer.js

state: 修改前的全局数据
- state = defaultState 为全局数据设置默认值
action: 组件传来的需要修改的数据

const defaultState = {
    //在此处自定义全局数据的默认值
}

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

组件中操作全局数据

4.1 组件中引入全局数据仓库
```
import store from './store/index'
```
4.2 组件中获取全局数据
```
store.getState()
```

4.3 组件中修改全局数据

通过action来间接修改 ---- 大项目一般使用actionCreaters来间接修改
组件中定义的action本质上只是告诉store要做何修改，修改的数据什么，真正的修改是在reducer中进行的
通过store.dispatch(action)将action提交给store处理

const action = {
  type: '修改操作简称',  //在reducer中对比这个简称 做出相应的修改操作
  属性:  值     //设置此次修改的数据名（属性）、数据值 
}
store.dispatch(action)

//案例
const action = {
  type: 'change_input_value',
  value: 'hello'
}
store.dispatch(action)

4.4 在reducer根据action修改全局数据
- reducer中其实也不能修改store的数据，所以需要深拷贝原来的数据，然后修改拷贝来的数据，将修改后的数据返回给store，store中再做数据更新
- reducer必须是纯函数
  - 给定确定的输入就一定会有确定的输出，给定输入：state、action 则确定输出：newState || state
    - 函数中不能有网络请求、时间相关操作（new Date() setTimeout等）
  - 不能有副作用，只是修改newState 不要有其它操作
```
const defaultState = {
  inputValue: '1232131',
}

export default (state = defaultState, action) => {
  if(action.type === 'change_input_value'){  //判断是什么操作（与组件定义一致）
    const newState = JSON.parse(JSON.stringify(state))  //深拷贝
    newState.inputValue = action.value  // 修改数据
    return newState  //返回给了stroe
  }
  return state
}
```
4.5 组件中监听store中数据的变化，并实时获取，刷新组件中的数据
- store.subscribe(): 当store中的数据发生变化时，该函数就会执行
- handleStoreChange : 自定义函数，当store.subscribe()执行时在该自定义函数中获取store更新后的数据
```
store.subscribe(this.handleStoreChange)

 handleStoreChange() {
    this.setState(store.getState())  // store.getState()获取store数据 
  }
```

3 action types的拆分

使用流程：

在src/store文件夹下新建actionTypes.js

将所有action的type定义成常量并导出

//案例
export const CHANGE_INPUT_VALUE = 'change_input_value'
export const ADD_TO_LIST = 'add_to_list'
export const DEL_LIST = 'del_list'

在reducer.js、actionCreators.js等文件文件中使用需要导入

//导入
import {CHANGE_INPUT_VALUE, ADD_TO_LIST, DEL_LIST} from './actionTypes'

拆分的好处：

当type用常量时，如果拼写错误，编译时会报错，便于快速定位BUG
如果type使用的是字符串，当字符串拼写错误时，编译时不会报拼写的错误，很能快速定位BUG

4 actionCreators

actionCreators用于管理action，避免action在组件中直接定义