Redux是什么

Redux 解决数据传递的一个框架。简单的说就是把组件中的数据放到一个公用的存储区域去存储。

Redux的工作流程

React Component组件：相当于一个借书的人

Action Creactors：借书的人要借什么书，说出来要借什么书这句话

Store：图书馆管理员

Reducers：记录本（记录了有什么书、什么时候换）

以上流程可以简化抽象为，拿到书（数据）：

首先我们需要一个借书人（component），其次我们要知道要借什么书（action），当明白自己的需求后，我们要找到图书馆管理员（store）去借书，图书馆管理员（store）查阅手册（Reducers）后拿到书，再把这本书拿给借书人（component）。

代码实现

1）安装redux

npm install --save redux

2）创建一个store

import { createStore } from 'redux'

let store = createStore();

export default store;

就像之前了解的，图书馆管理员记不住所有的图书，所以在创建它时需要一个小本子，记录当前所有的图书

import { createStore } from 'redux'

import reducer from './reducer'

let store = createStore(reducer);

export default store;

3）创建一个reducer，它返回的是一个函数

export default (state, action) => {

  return state;

}

state：整个图书馆的图书（整个store存储的数据）

action：用户传递过来的那句话

我们可以设置一个默认的数据

const defaultState = {

  inputVal: '',

  list: [1, 2, 3]

}

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

  return state;

}

4）在组件中获取数据

假定我们的组件为：TodoList

1、引入store

import store from './store/index.js'

2、拿到数据

store.getState()

可以拿到：

{

  inputVal: '',

  list: [1, 2, 3]

}

5）在组件中改变数据

1、创建一个action

const action = {

   type: 'change_input_val',

   value: inputVal

}

type：告诉reducer，我要你做什么事情

value：传过去的值

2、把action传递给store（store会自动的把数据传递给reducer）

store.dispatch(action)

3、在reducer中加上对应处理的方法

const defaultState = {

  inputVal: '',

  list: [1, 2, 3]

}

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

if (action.type === 'change_action') {

   let newstate = JSON.parse(JSON.stringify(state));

   newstate.inputVal = action.value;

   state = newstate;

}

return state;

}

4、组件中订阅数据的变化

store.subscribe(this.handleStoreChange)

优化代码

1）action——type的优化（避免出错）

const action = {

   type: 'change_input_val',

   value: inputVal

}

1、创建actionTypes.js文件，定义常量

export const CHANGE_INPUT_VALUE = 'change_input_value';

2、在TodoList组件中引入actionTypes.js

import CHANGE_INPUT_VALUE from '../actionTypes.js'

const action = {

   type: CHANGE_INPUT_VALUE,

   value: inputVal

}

3、同TodoList操作，在reducer中也同样引入actionTypes.js

2）使用actionCreateor统一创建action

中间件

中间件是介于Action 和 Reducer之间。

在没有使用中间件之前，action只能是一个对象，但是使用了中间件后，action可以是一个函数。

简单的说，就是对dispatch方法的升级，最原始的dispatch方法接受到一个对象后，会把这个对象传递给store。当升级后，如果传入的是函数，它不会直接把这个函数传递给store，而是先执行这个函数，需要传递给store的时候才传递给store。

代码实现

以redux-thunk 为例

1）在store文件中，先引入applyMiddleware，使得我们可以使用中间件

import { createStore, applyMiddleware} from 'redux'

import reducer from './reducer'

let store = createStore(reducer);

export default store;

2）引入redux-thunk

1、引入之前需要安装redux-thunk

2、在store中引入中间件

import { createStore,  applyMiddleware} from 'redux'

import reducer from './reducer';

import thunk from 'redux-thunk';

let store = createStore(

  reducer,

  applyMiddleware(thunk)

);

export default store;

3）在action中添加方法（可以把请求接口拿到数据的方法搬到这）