🌂 序言

大家都知道， react 是单向数据流，所以它传递数据也较为简单，父子之间的关系也较为明确。但是呢，如果我们要做更多复杂数据的传递，单单使用 react 是完全不够的。因此，我们需要用到 redux 来做更为复杂的数据传递。

那在下面的这篇文章中，将从入门到进阶，讲解 redux 的工作流程。

叮！开始 redux 之旅吧~👏

☂️ 一、基础知识

1、Redux 概念简述

对于 react 来说，它是一个非视图层的轻量级框架，如果要用它来传递数据的话，则要先父传子，然后再慢慢地一层一层往上传递。

但如果用 redux 的话，假设我们想要某个组件的数据，那这个组件的数据则会通过 redux 来存放到 store 中进行管理。之后呢，通过 store ，再来将数据一步步地往下面的组件进行传递。

值得注意的是，我们可以视 Redux 为 Reducer 和 Flux 的结合。

2、Redux 的工作流程

Redux ，实际上就是一个数据层的框架，它把所有的数据都放在了 store 之中。我们先来看一张图：

Redux的工作流程

大家可以看到中间的 store ，它里面就存放着所有的数据。继续看 store 向下的箭头，然后呢，每个组件都要向 store 里面去拿数据。

我们用一个例子来梳理整张图，具体如下：

① 整张图上有一个 store ，它存放着所有的数据，也就是存储数据的公共区域；
② 每个组件，都要从 store 里面拿数据；
③ 假设现在有一个场景，模拟我们要在图书馆里面借书。那么我们可以把 react Component 理解为借书人，之后呢，借书人要去找图书馆管理员才能借到这本书。而借书这个过程中数据的传递，就可以把它视为是 Action Creators ，可以理解为 “你想要借什么书” 这句话。
④ Action Creatures 去到 store 。这个时候我们把 store 当做是图书馆管理员，但是，图书馆管理员是没有办法记住所有图书的数据情况的。一般来说，它都需要一个记录本，你想要借什么样的书，那么她就先查一下；又或者你想要还什么书，她也要查一下，需要放回什么位置上。
⑤ 这个时候就需要跟 reducers 去通信，我们可以把 reducers 视为是一个记录本，图书馆管理员用这个记录本来记录需要的数据。管理员 store 通过 reducer 知道了应该给借书人 Components 什么样的数据。

🎃 二、使用 Antd 实现 TodoList 页面布局

1、在项目中使用 Antd

打开 antdesign 的官网 👉antd 官网传送门，我们先来在项目中引入它。具体步骤如下：

第一步，安装 antd 。命令如下：

bash

npm install antd --save

第二步，引入样式。代码如下：

bash

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

2、使用 Antd 实现 TodoList 的基本布局

首先，我们在项目的 src 文件夹下创建一个新的文件，命名为 TodoList.js 。具体代码如下：

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';

const data = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
];

class TodoList extends Component {
  render() {
    return (
      <div style={{ marginTop: '10px', marginLeft: '10px' }}>
        <div>
          <Input placeholder='todo info' style={{ width: '300px' }} />
          <Button type='primary'>提交</Button>
        </div>
        <List
          bordered
          dataSource={data}
          renderItem={(item) => <List.Item>{item}</List.Item>}
        />
      </div>
    );
  }
}

export default TodoList;

此时浏览器的显示效果为：

antd布局todoList

3、创建 redux 中的 store

（1）创建 store

接下来我们来创建项目中的 store 。首先在项目的 src 文件夹下创建一个新的文件夹，命名为 store 。接着，我们在 store 文件夹下面，创建一个新的文件，命名为 index.js 。具体代码如下：

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

const store = createStore(reducer);

export default store;

然后呢，继续在 store 文件夹下面创建一个新的文件，命名为 reducer.js 。具体代码如下：

const defaultStore = {
  inputValue: '',
  list: [],
};

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

由此，我们就创建完成了项目中的 store 。

（2）在项目中使用 store

创建完 store 之后，我们先初步在项目中使用这个 store ，以便于看看效果。先来添加 store 中的数据，首先改造在 store 中的 reducer.js 文件，具体代码如下：

const defaultStore = {
  inputValue: '123',
  list: [1, 2],
};

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

之后改造 TodoList.js 。具体代码如下：

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
  }
  render() {
    return (
      <div style={{ marginTop: '10px', marginLeft: '10px' }}>
        <div>
          <Input
            placeholder={this.state.inputValue}
            style={{ width: '300px' }}
          />
          <Button type='primary'>提交</Button>
        </div>
        <List
          bordered
          dataSource={this.state.list}
          renderItem={(item) => <List.Item>{item}</List.Item>}
        />
      </div>
    );
  }
}

export default TodoList;

此时浏览器的显示效果为：

todoList接收来自store的数据

🧵 三、Action 和 Reducer 的编写 - 增添功能

1、主体页面内容改造

接下来，我们使用 action 和 reducer ，来对这个组件的数据进行前后传递。首先，先来改造 TodoList.js 文件。具体代码如下：

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleStoreChange = this.handleStoreChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    store.subscribe(this.handleStoreChange);
  }
  render() {
    return (
      <div style={{ marginTop: '10px', marginLeft: '10px' }}>
        <div>
          <Input
            value={this.state.inputValue}
            placeholder='todo info'
            style={{ width: '300px', marginRight: '10px' }}
            onChange={this.handleInputChange}
          />
          <Button type='primary' onClick={this.handleBtnClick}>
            提交
          </Button>
        </div>
        <List
          style={{ marginTop: '10px', width: '300px' }}
          bordered
          dataSource={this.state.list}
          renderItem={(item) => <List.Item>{item}</List.Item>}
        />
      </div>
    );
  }

  handleInputChange(e) {
    // 在react中，action是一个对象的形式
    // type旨在告诉react说，你帮我去改变input的值，这个值是下面的value，也就是e.target.value
    const action = {
      type: 'change_input_value',
      value: e.target.value,
    };
    store.dispatch(action);
    // console.log(e.target.value)
  }

  handleStoreChange() {
    // 当感知到store的数据发生变化时，那么就去调用store.getState方法，从store里面再重新取一次数据，
    // 然后去调用setState，替换掉当前store里面的数据
    this.setState(store.getState());
  }

  handleBtnClick() {
    const action = {
      type: 'add_todo_item',
    };
    store.dispatch(action);
  }
}

export default TodoList;

接下来我们来分析以上代码。首先，每一个动作分别会先去绑定对应的事件，之后呢，在事件里面，去创造 action 。而对于创造的 action 来说，它旨在告诉 react ，让 react 去帮忙 action 去改变某个值，而这个值就是它绑定的 value 。

最后， action 要做的事情结束了，那么它的数据就需要去存储到 store 里面。于是通过 store.dispatch(action) 来进行处理，将 action 的数据传递到 store 里面。

2、改变 action 中的数据

对于 action 一开始的值来说，它是固定的。但有时候我们是想要去修改 action 中的值，这个时候就需要用到 reducer 。现在，我们来改造下 reducer.js 文件，让 input 框可以自由的输入值，同时，点击提交按钮之后，进行列表的增添操作。具体代码如下：

const defaultStore = {
  inputValue: '123',
  list: [1, 2],
};

// reducer 可以接收state，但是绝不能修改state
const reducer = (state = defaultStore, action) => {
  if (action.type === 'change_input_value') {
    const newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = action.value;
    return newState;
  }
  if (action.type === 'add_todo_item') {
    const newState = JSON.parse(JSON.stringify(state));
    newState.list.push(newState.inputValue);
    newState.inputValue = '';
    console.log(newState);
    return newState;
  }
  return state;
};
export default reducer;

3、store 数据改造

下面，我们来看下 store 文件夹下 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 之外，我们还要将 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 给传递进去并调用这个方法。

最后，我们来看下浏览器的显示效果：

action和reducer传递数据

🧶 四、使用 Redux 实现 TodoList 的删除功能

1、对组件进行事件绑定

上面我们实现了增添功能，那么现在，我们继续来实现删除功能，实现每点击每一项时，能够删除点击项的数据。先来在 TodoList.js 文件中绑定对应的事件，具体代码如下：

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store';

class TodoList extends Component {
  constructor(props) {
    // 此处省略上述已有代码
  }
  render() {
    return (
      {/* 此处省略上述已有代码 */}
        <List
          style={{marginTop: '10px', width: '300px'}}
          bordered
          dataSource={this.state.list}
          renderItem={(item, index) => <List.Item onClick={this.handleItemDelete.bind(this, index)}>{item}</List.Item>}
        />
      </div>
    )
  }

  // 此处省略上述已有代码

  handleItemDelete(index) {
    const action = {
      type: 'delete_todo_item',
      index
    }
    store.dispatch(action);
  }
}

export default TodoList;

2、在 reducer 中进行数据通信

接着，我们在 reducer.js 文件中，对数据进行通信。具体代码如下：

const defaultStore = {
  inputValue: '123',
  list: [1, 2],
};

// reducer 可以接收state，但是绝不能修改state
const reducer = (state = defaultStore, action) => {
  // 此处省略上述已有代码

  if (action.type === 'delete_todo_item') {
    const newState = JSON.parse(JSON.stringify(state));
    newState.list.splice(action.index, 1);
    return newState;
  }
  return state;
};
export default reducer;

现在，我们来看下浏览器的显示效果：

删除功能

👓 五、逻辑归纳

1、ActionTypes 的拆分

在上面的 TodoList.js 中，大家可以看到，我们会频繁地去操作 action 。同时，假设说其中的 type 如果我们稍微写错了一个字母，那排错的过程总是不好定位的。

因此，我们要来做的一件事情就是 ActionTypes 的拆分。

首先，我们在 store 文件夹下新增一个文件，命名为 actionTypes.js 。具体代码如下：

export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_TODO_ITEM = 'delete_todo_item';

其次，改造 TodoList.js 下的内容。具体代码如下：

import {
  CHANGE_INPUT_VALUE,
  ADD_TODO_ITEM,
  DELETE_TODO_ITEM,
} from './store/actionTypes';

class TodoList extends Component {
  handleInputChange(e) {
    const action = {
      type: CHANGE_INPUT_VALUE,
      value: e.target.value,
    };
    store.dispatch(action);
  }

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

  handleBtnClick() {
    const action = {
      type: ADD_TODO_ITEM,
    };
    store.dispatch(action);
  }

  handleItemDelete(index) {
    const action = {
      type: DELETE_TODO_ITEM,
      index,
    };
    store.dispatch(action);
  }
}

export default TodoList;

最后，改造 reducer.js 文件。具体代码如下：

import {
  CHANGE_INPUT_VALUE,
  ADD_TODO_ITEM,
  DELETE_TODO_ITEM,
} from './actionTypes';

const defaultStore = {
  inputValue: '123',
  list: [1, 2],
};

const reducer = (state = defaultStore, action) => {
  if (action.type === CHANGE_INPUT_VALUE) {
    const newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = action.value;
    return newState;
  }
  if (action.type === ADD_TODO_ITEM) {
    const newState = JSON.parse(JSON.stringify(state));
    newState.list.push(newState.inputValue);
    newState.inputValue = '';
    console.log(newState);
    return newState;
  }
  if (action.type === DELETE_TODO_ITEM) {
    const newState = JSON.parse(JSON.stringify(state));
    newState.list.splice(action.index, 1);
    return newState;
  }
  return state;
};
export default reducer;

通过将 change_input_value 、 add_todo_item 和 delete_todo_item 进行整合，将其整合到 actionTypes.js 文件下，这样，如果我们遇到字母写错的情况下，也能够更好的进行排错。

2、使用 actionCreator 统一创建 action

在上面的 TodoList.js 中，大家可以看到，对于几个绑定的事件来说，我们总是要频繁的去创建 action ，重复性地操作是在程序中最忌讳的一个事情。因此呢，我们要使用 actionCreator ，来对 action 进行统一管理，使得逻辑更加地统一完整。

首先，我们在 store 文件夹下新创建一个文件，命名为 actionCreators.js 。具体代码如下：

import {
  CHANGE_INPUT_VALUE,
  ADD_TODO_ITEM,
  DELETE_TODO_ITEM,
} from './actionTypes';

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

export const getAddItemAction = (value) => ({
  type: ADD_TODO_ITEM,
});

export const getDeleteItemAction = (index) => ({
  type: DELETE_TODO_ITEM,
  index: index,
});

继续，我们来改造 TodoList.js 。具体代码如下：

import {
  getInputChangeAction,
  getAddItemAction,
  getDeleteItemAction,
} from './store/actionCreators';

class TodoList extends Component {
  handleInputChange(e) {
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action);
  }

  handleBtnClick() {
    const action = getAddItemAction();
    store.dispatch(action);
  }

  handleItemDelete(index) {
    const action = getDeleteItemAction(index);
    store.dispatch(action);
  }
}

export default TodoList;

通过将 action 中的操作统一抽离到 actionCreators.js 当中，使得最终的逻辑更加的统一。

👔 六、Redux 的一些总结

讲到这里，我们对上面的一些知识点进行归纳总结，具体如下

1、Redux 设计和使用的三项原则

Redux 的设计和使用遵循以下三大原则：

store 必须是唯一的 👉 即整个应用之中必须且只能有一个 store ；
只有 store 能够改变自己的内容 👉 即 store 不是 reducer 去更新的，而是 store 在拿到 reducer 的数据之后，自己对自己的数据进行一次更新；因此，我们回到上面的 reducer.js 文件，在 react 中，是不允许 state.inputValue === 某个值 之类的事情发生的哦，也就是说不能对其直接进行赋值。
Reducer 必须是纯函数 👉 所谓纯函数，即给定固定的输入，就一定有固定的输出，而且不会产生任何的副作用。回到我们上面的 reducer.js 文件，大家可以看到， state 是固定的， action 也是固定的，那么最终返回的 newState 自然也就是固定的。

2、Redux 的核心 API

我们再来复习 Redux 的几个核心 API 。先看下图：

Redux的核心API

现在来回顾下这几个核心 API 的作用。具体如下：

createStore —— 可以帮助我们创建一个 store ；
store.dispatch —— dispatch 方法帮助我们派发 action ，同时，这个 action 会传递给 store ；
store.getState —— getState 方法帮助我们获取到所有的数据；
store.subscribe —— subscribe 帮助我们订阅 store 的改变，只要 store 发生改变，store.subscribe 接收的回调函数就会被执行。

👝 七、进阶组件的拆分

1、UI 组件和容器组件的拆分

在上面的代码中，我们已经基本完成了 TodoList 的功能。但是呢，大家有没有发现，在 TodoList.js 文件中，页面的渲染和页面的逻辑编写是放在一起的。

往往在实际开发中，我们都会直接把 UI 组件和容器组件给拆分开来。其中， UI 组件专门用于负责页面的渲染，而容器组件用于负责页面的逻辑。

下面我们来对其进行拆分。首先，我们现在 src 文件夹下新增一个文件，命名为 TodoListUI.js 。具体代码如下：

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';

class TodoListUI extends Component {
  render() {
    return (
      <div style={{ marginTop: '10px', marginLeft: '10px' }}>
        <div>
          <Input
            value={this.props.inputValue}
            placeholder='todo info'
            style={{ width: '300px', marginRight: '10px' }}
            onChange={this.props.handleInputChange}
          />
          <Button type='primary' onClick={this.props.handleBtnClick}>
            提交
          </Button>
        </div>
        <List
          style={{ marginTop: '10px', width: '300px' }}
          bordered
          dataSource={this.props.list}
          renderItem={(item, index) => (
            <List.Item
              onClick={() => {
                this.props.handleItemDelete(index);
              }}
            >
              {item}
            </List.Item>
          )}
        />
      </div>
    );
  }
}

export default TodoListUI;

继续，我们来改造 TodoList.js 文件的内容。具体代码如下：

import React, { Component } from 'react';

import store from './store';
import {
  getInputChangeAction,
  getAddItemAction,
  getDeleteItemAction,
} from './store/actionCreators';
import TodoListUI from './TodoListUI';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleStoreChange = this.handleStoreChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleItemDelete = this.handleItemDelete.bind(this);
    store.subscribe(this.handleStoreChange);
  }
  render() {
    return (
      <TodoListUI
        inputValue={this.state.inputValue}
        list={this.state.list}
        handleInputChange={this.handleInputChange}
        handleBtnClick={this.handleBtnClick}
        handleItemDelete={this.handleItemDelete}
      />
    );
  }

  handleInputChange(e) {
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action);
  }

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

  handleBtnClick() {
    const action = getAddItemAction();
    store.dispatch(action);
  }

  handleItemDelete(index) {
    const action = getDeleteItemAction(index);
    store.dispatch(action);
  }
}

export default TodoList;

大家可以看到，我们把页面的内容给单独抽离出来放到 TodoListUI.js 文件当中，让它只做渲染这一件事情。这样，我们就成功的把 UI 组件和逻辑组件进行拆分。

2、无状态组件

有了 UI 组件之后，我们再来看另外一种组件，无状态组件。所谓无状态组件，就是整个页面什么逻辑都没有，只有一个 render 函数时，我们可以把它称之为是一个无状态组件。

那无状态组件怎么定义呢？？

我们可以定义一个函数，这个函数接收一个参数，props 。 TodoListUI.js 文件的具体代码如下：

import React from 'react';
import { Input, Button, List } from 'antd';

const TodoListUI = (props) => {
  return (
    <div style={{ marginTop: '10px', marginLeft: '10px' }}>
      <div>
        <Input
          value={props.inputValue}
          placeholder='todo info'
          style={{ width: '300px', marginRight: '10px' }}
          onChange={props.handleInputChange}
        />
        <Button type='primary' onClick={props.handleBtnClick}>
          提交
        </Button>
      </div>
      <List
        style={{ marginTop: '10px', width: '300px' }}
        bordered
        dataSource={props.list}
        renderItem={(item, index) => (
          <List.Item
            onClick={() => {
              props.handleItemDelete(index);
            }}
          >
            {item}
          </List.Item>
        )}
      />
    </div>
  );
};

export default TodoListUI;

当一个普通函数只有 render 函数的时候，我们完全可以通过一个无状态的组件来替换掉这个普通的组件。那为什么要做这样子的替换呢？

如果我们改造为只有一个函数的时候，那么程序就只需要去运行这个函数，也只需要做这一件事情。换言之，如果我们用 class 的话，那么它的类背后是一个对象，而这个对象又有很多的生命周期函数等等，这就显得没有那么纯粹了。因此，我们定义无状态组件这样的方式，来让组件更加地纯正。

🎩 八、Redux 发起异步请求

1、Redux 中发送异步请求数据

往往在实际的项目中，我们总是需要去和后端请求接口数据并发送 AJAX 请求。那想要在 react 中请求到后端接口数据，该怎么处理呢？

首先我们在 TodoList.js 下面，来请求数据。具体代码如下：

import {
  getInputChangeAction,
  getAddItemAction,
  getDeleteItemAction,
  initListAction,
} from './store/actionCreators';

class TodoList extends Component {
  componentDidMount() {
    axios.get('./list.json').then((res) => {
      const data = res.data;
      const action = initListAction(data);
      store.dispatch(action);
    });
  }
}

接着，修改 actionTypes.js 代码。具体如下：

export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_TODO_ITEM = 'delete_todo_item';
export const INIT_LIST_ACTION = 'init_list_action';

继续，我们在 actionCreators.js 中对封装 action 。具体代码如下：

import {
  CHANGE_INPUT_VALUE,
  ADD_TODO_ITEM,
  DELETE_TODO_ITEM,
  INIT_LIST_ACTION,
} from './actionTypes';

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

export const getAddItemAction = (value) => ({
  type: ADD_TODO_ITEM,
});

export const getDeleteItemAction = (index) => ({
  type: DELETE_TODO_ITEM,
  index: index,
});

export const initListAction = (data) => ({
  type: INIT_LIST_ACTION,
  data: data,
});

最后，修改 reducer.js 代码。具体代码如下：

import {
  CHANGE_INPUT_VALUE,
  ADD_TODO_ITEM,
  DELETE_TODO_ITEM,
  INIT_LIST_ACTION,
} from './actionTypes';

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

// reducer 可以接收state，但是绝不能修改state
const reducer = (state = defaultStore, action) => {
  if (action.type === CHANGE_INPUT_VALUE) {
    const newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = action.value;
    return newState;
  }
  if (action.type === INIT_LIST_ACTION) {
    const newState = JSON.parse(JSON.stringify(state));
    newState.list = action.data;
    return newState;
  }
  if (action.type === ADD_TODO_ITEM) {
    const newState = JSON.parse(JSON.stringify(state));
    newState.list.push(newState.inputValue);
    newState.inputValue = '';
    console.log(newState);
    return newState;
  }
  if (action.type === DELETE_TODO_ITEM) {
    const newState = JSON.parse(JSON.stringify(state));
    newState.list.splice(action.index, 1);
    return newState;
  }
  return state;
};
export default reducer;

由此，我们就实现了通过 axios 的方式来发布 AJAX 请求，请让其获取到数据。

2、Redux-thunk 中间件

（1）解决什么问题

在上面的例子中，我们成功地对接口的数据发起了请求。上面这种情况是属于比较简单的例子，但是往往在实际场景中我们遇到的，都是比较复杂的例子。

因此，我们希望的是，当遇到异步请求或者是有着非常复杂逻辑的时候，把它移出到其他文件下进行管理。

那这个时候就需要用到 Redux-thunk 中间件来进行问题解决。接下来我们来看下 Redux-thunk 中间件如何使用？

（2）如何使用

第一步： 安装 redux-thunk 。具体命令如下：

bash

npm i redux-thunk -D

第二步： 引入 redux-thunk 。往往我们在实际调试中，都会受用 redux-devtools 去对项目的 store 进行调试。但如果我们既要引入 redux-devtools ，又要引入 redux-thunk 中间件，该怎么处理呢？在 store|index.js 文件中进行处理。具体代码如下：

// compose函数来自于redux中
import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
  : compose;

const enhancer = composeEnhancers(applyMiddleware(thunk));

const store = createStore(reducer, enhancer);

export default store;

通过这种形式的编码，使得我们的 store 既支持 windows 下的 devtools ，也就是可以去调试 store ，又可以成功的引入 redux-thunk 。

第三步： 将异步逻辑进行抽离。先来修改 TodoList.js 的代码。具体如下：

import {
  getTodoList,
  getInputChangeAction,
  getAddItemAction,
  getDeleteItemAction,
} from './store/actionCreators';

class TodoList extends Component {
  componentDidMount() {
    // 这里的action是一个函数
    const action = getTodoList();
    // 只有用了thunk，action才能是用函数的形式去进行传递
    store.dispatch(action);
  }
}

接着，修改 actionCreators.js 的代码。具体代码如下：

// getTodoList 是一个函数
// 以这种形式生成的函数，可以直接接收dispatch方法
export const getTodoList = () => {
  return (dispatch) => {
    axios.get('./list.json').then((res) => {
      const data = res.data;
      // 这里的 action 是一个对象
      const action = initListAction(data);
      dispatch(action);
    });
  };
};

下面，我们来解释下上面这两段代码，具体如下：

配置好 redux-thunk 的环境之后，它使得我们可以在 action 里面，写异步的代码了！为什么这么说呢？

以前我们在创建 action 时，只能是一个JS 对象，而现在，当使用了 redux-thunk 之后，即使 getTodoList() 返回的不是一个对象而是一个函数，也可以通过 store.dispatch() 的方式，把函数发送给到 store 了。
那为什么能够把函数给发送出去呢？就是因为用了 redux-thunk 。

继续，我们要谈论具体的实现步骤 👇：

首先让 TodoList.js 中的 store ，去执行 action 函数。而这个 action 函数，来自于 actionCreators.js 中的 getTodoList() 。
对于 getTodoList() 来说，它要做的事情是去请求 json 的数据和获取 json 的数据。
而获取好了数据之后，接下来，要改变 store 里面的数据，那么要先去创建一个 action ，这个 action 用来提供给 store.dispatch() 进行调用。但是呢， store.dispatch() 要怎么去获取呢？我们所返回的那个函数中，就会自动地接收到 store.dispatch() 方法。所以，只要通过 dispatch(action) ，将 action 给派发出去就可以了。
也就是说， redux-thunk 使得我们去创建 action 或者支持 action 时，是一个函数的形式。

（3）为什么要使用 redux-thunk ？

看完上面的解释之后，相信大家也就知道 redux-thunk 的奇妙之处了。那为什么要使用 redux-thunk 呢？👇

如果把异步函数放在组件的生命周期中来使用的话，那么这个组件的逻辑就会变得越来越复杂，组件的内容也会变得越来越多。因此，我们通常就会把这种复杂的异步逻辑给拆分出去进行单独管理。那么现在，我们就借助 redux-thunk 中间件，把异步逻辑给拆分到 actionCreators.js 去进行单独管理。由此，使得代码更加规范和统一。

（4）什么是 Redux-thunk 中间件？

在有了上面内容的铺垫之后，接下来，我们返回到中间件的源头，来谈谈 Redux-thunk 中间件的原理。

所谓中间件，肯定就是说是谁和谁的中间。我们先来看一张图：

Redux Data Flow

Redux 中间件的这个中间，指的是 action 和 store 之间。

之前我们说过，在 redux 中， action 只能是一个对象，就因为它是对象，因此直接把它派发给 store 。现在，当我们使用了 redux-thunk 之后， action 就可以是函数了。那为什么可以是函数呢？

看上面的图中不难发现， action 通过 dispatch 的方法，将数据递交给了 store 。且 action 和 store 之间，是一个 dispatch 方法，那我们说的中间件 middleware ，实际上就是对 dispatch 方法的封装和升级。

对于最原始的 dispatch 方法来说，它会接收到一个 JS 对象并将其传递给 store 。

但如果我们传递的是一个函数的话，那么这个 dispatch 就升级了。 dispatch 不会直接把函数传递给 store ，它会通过 redux-thunk 中间件的方式，先执行对应的函数，等执行到需要调用 store 的时候，再去调用 store 。

💼 九、Redux 的其他中间件

1、Redux-logger

redux 的中间件非常的多，比如 redux-logger 可以记录 action 每一次派发的日志。那它怎么记录呢？

它在每一次调用 action 的时候，会通过 dispatch 方法把 action 传递给 store ，之后呢，我们可以对 dispatch 做一个升级，让 dispatch 不仅把 action 传递给 store ，而且在每一次传递之前，我们还通过 console.log 的方式将其打印出来，这样的话，我们就写了一个 redux-logger 的中间件，它可以在我们派发 action 的时候，把 action 打印在我们的控制台里面。

2、Redux-saga

（1）Redux-saga 是什么

在现如今的项目中，用的比较火的中间件不仅有 redux-thunk ， redux-logger ，还有 reudx-saga 的使用范围也非常的广。

reudx-saga 也是解决 react 中异步问题的一个中间件，不同于 redux-thunk 的是， redux-thunk 采用的是把异步操作放到 action 里面去操作。而 redux-saga 采用的设计思想是，单独地把异步逻辑拆分出来，放到另一个文件中去进行管理。那 redux-saga 这个中间件该如何使用呢？

（2）Redux-saga 如何使用

我们把上面的 TodoList 组件进行升级改造。首先是 store|index.js 文件。具体代码如下：

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import createSagaMiddleware from 'redux-saga';
import todoSagas from './sagas';

const sagaMiddleware = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
  : compose;
const enhancer = composeEnhancers(sagaMiddleware(sagaMiddleware));

const store = createStore(reducer, enhancer);
sagaMiddleware.run(todoSagas);

export default store;

在这个文件当中，主要是要把基础配置做好。那这里主要有几个要注意的点是：

引入 createSagaMiddleware ；
之后是使用 const sagaMiddleware = createSagaMiddleware() 将其进行引入；
使用 apllyMiddleware 去使用这个中间件；
使用完中间件之后，我们又创建了 saga.js 。

接下来我们在 store 文件夹下创建 saga.js 。具体代码如下：

import { takeEvery, put } from 'redux-saga/effects';
import { initListAction } from './actionCreators';
import { GET_INIT_LIST } from './actionTypes';
import axios from 'axios';

function getInitList() {
  try {
    const res = yield axios.get('./list.json');
    const action = initListAction(res.data);
    yield put(action);
  } catch (e) {
    console.log('list.json网络请求失败');
  }
}

function* mySaga() {
  // 通过takeEvery去捕获到每一次派发下来的action
  yield takeEvery(GET_INIT_LIST, getInitList);
}

export default mySaga;

对于 saga.js 来说，有几个要注意的点是：

在 saga.js 里面，一定要导出一个 generator 函数，在这个函数里面，我们写了一些逻辑。逻辑是，当我们接收到的 action 类型是 GET_INIT_LIST 时，那么我们就会去执行 getInitList 这个方法。
getInitList() 方法是一个函数，它将会去帮我们取数据，取完数据之后，再将这个数据创建出来一个新的 action ，并将这个 action 通过 yield put(action) 的方式，派发给 store 。

下面我们来看 actionTypes.js 中的内容。具体代码如下：

// CHANGE_INPUT_VALUE、ADD_TODO_ITEM、DELETE_TODO_ITEM、INIT_LIST_ACTION
export const GET_INIT_LIST = 'get_init_list';

接着，我们来到 TodoList.js 。具体代码如下：

import {
  getInputChangeAction,
  getAddItemAction,
  getDeleteItemAction,
  getInitList,
} from './store/actionCreators';

class TodoList extends Component {
  // 此处省略n多内容

  componentDidMount() {
    const action = getInitList();
    store.dispatch(action);
  }
}

export default TodoList;

最后是 store|actionCreators.js 。具体代码如下：

import {
  GET_INIT_LIST,
  CHANGE_INPUT_VALUE,
  ADD_TODO_ITEM,
  DELETE_TODO_ITEM,
  INIT_LIST_ACTION,
} from './actionTypes';

// 此处省略n多内容

export const getInitList = () => ({
  type: GET_INIT_LIST,
});

在 TodoList.js 中，我们创建了一个 action ，并将这个 action 派发给 store 。

🛵 十、React-Redux

1、React-Redux 是什么

在学习了 react 之后，紧接着，我们学习了 redux 。那如果把它们俩结合起来， react-redux 是什么呢？

实际上，它是一个第三方模块，它使得我们在 react 中更加方便地使用 redux 。

2、React-Redux 的使用

（1）安装 React-Redux

同样地，我们以 TodoList 组件为例，来看下 react-redux 的使用。首先新创建一个 react 项目，同时安装 react-redux 。具体命令如下：

npm install react-redux

（2）项目目录

下面先来看项目目录。具体如下图：

在这里插入图片描述

（3）核心内容

第一步，将 TodoList 组件挂载到页面上。src|index.js 文件下的内容如下：

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store';

const App = (
  // 表示Provider里面所有的组件，都有能力获取到store
  <Provider store={store}>
    <TodoList />
  </Provider>
);

ReactDOM.render(App, document.getElementById('root'));

Provider 是 react 提供的第一个核心 API ，它旨在表明， Provider 里面所有的组件，都有能力获取到 store 。

第二步，编写 src|TodoList.js 的内容。具体代码如下：

import React from 'react';
import { connect } from 'react-redux';

const TodoList = (props) => {
  const { inputValue, list, changeInputValue, handleClick, handleDelete } =
    props;
  return (
    <div>
      <div>
        <input value={inputValue} onChange={changeInputValue} />
        <button onClick={handleClick}>提交</button>
      </div>
      <ul>
        {list.map((item, index) => {
          return (
            <li onClick={handleDelete} key={index}>
              {item}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list,
  };
};

// store, dispatch, props
const mapDispatchToProps = (dispatch) => {
  return {
    changeInputValue(e) {
      const action = {
        type: 'change_input_value',
        value: e.target.value,
      };
      // console.log(action.value)
      dispatch(action);
    },
    handleClick() {
      const action = {
        type: 'add_item',
      };
      dispatch(action);
    },
    handleDelete() {},
  };
};

// 让我们的TodoList和store做连接
// TodoList是一个UI组件，connect把这个UI组件和前边的业务逻辑相结合，可以把前面括号的内容称为是容器组件
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

在上面的代码中，我们要注意的是 react-redux 中的 connect 。

connect 表示的是连接，那么是谁和谁做连接呢？ TodoList 和 store 做连接。它们俩做连接需要一个映射关系，这个映射关系就在 mapStateToProps 里面。

在 mapStateToProps 中， state 指的是 store 里面的数据，那 store 里面的数据，就把它映射到 props 里面，之后我们就可以通过 this.props.xxx 的方式，去获取到 store 里面的数据。

第三步，创建 reducer 。在 src|store|reducer.js 下进行编写，具体代码如下：

const defaultState = {
  inputValue: '',
  list: [],
};

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

将 store 中的数据给放到 reducer 当中去进行记录。

第四步，将 reducer 传给 store 。在 src|store|index.js 下进行编写，具体代码如下：

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

const store = createStore(reducer);

export default store;

我们将 reducer 中存放的内容进行深拷贝，并把它传回给 store 。这样，就形成了一个数据传递的闭环。

最后，我们来看一下浏览器显示的效果：

React-Redux

相比于使用中间件来说， React-Redux 的使用更加地直观和简洁。在实际项目中，不管是 redux 中间件，还是 react-redux ，都值得拿来做状态管理。

那么要注意的是，redux 中间件和 react-redux 之间，各自在使用过程中不同的点，区分好即可。至于在项目中使用哪一种类型，就依据当下的项目场景去决定就好啦！

🚦 十一、结束语

在上面的文章中，我们讲解了 Redux 设计和使用的三项原则，同时，也讲解了 Redux 中的一些核心 API 。除此之外呢，我们还学习了 redux 的中间件， redux-thunk 和 redux-saga 。同时，还学习了另外一个做状态管理的内容， react-redux 。

到这里，关于 redux 的内容就介绍完毕啦！不知道大家是否对 redux 又有了新的了解呢？

🐣 彩蛋 One More Thing

（：往期推荐

👉初探 react，用 react 实现一个 todoList 功能

👉react 只停留在表层？五大知识点带你梳理进阶知识

🌂 序言 ​

☂️ 一、基础知识 ​

1、Redux 概念简述 ​

2、Redux 的工作流程 ​

🎃 二、使用 Antd 实现 TodoList 页面布局 ​

1、在项目中使用 Antd ​

2、使用 Antd 实现 TodoList 的基本布局 ​

3、创建 redux 中的 store ​

（1）创建 store ​

（2）在项目中使用 store ​

🧵 三、Action 和 Reducer 的编写 - 增添功能 ​

1、主体页面内容改造 ​

2、改变 action 中的数据 ​

3、store 数据改造 ​

🧶 四、使用 Redux 实现 TodoList 的删除功能 ​

1、对组件进行事件绑定 ​

2、在 reducer 中进行数据通信 ​

👓 五、逻辑归纳 ​

1、ActionTypes 的拆分 ​

2、使用 actionCreator 统一创建 action ​

👔 六、Redux 的一些总结 ​

1、Redux 设计和使用的三项原则 ​

2、Redux 的核心 API ​

👝 七、进阶组件的拆分 ​

1、UI 组件和容器组件的拆分 ​

2、无状态组件 ​

🎩 八、Redux 发起异步请求 ​

1、Redux 中发送异步请求数据 ​

2、Redux-thunk 中间件 ​

（1）解决什么问题 ​

（2）如何使用 ​

（3）为什么要使用 redux-thunk ？ ​

（4）什么是 Redux-thunk 中间件？ ​

💼 九、Redux 的其他中间件 ​

1、Redux-logger ​

2、Redux-saga ​

（1）Redux-saga 是什么 ​

（2）Redux-saga 如何使用 ​

🛵 十、React-Redux ​

1、React-Redux 是什么 ​

2、React-Redux 的使用 ​

（1）安装 React-Redux ​

（2）项目目录 ​

（3）核心内容 ​

🚦 十一、结束语 ​

🐣 彩蛋 One More Thing ​

（：往期推荐 ​

🌂 序言

☂️ 一、基础知识

1、Redux 概念简述

2、Redux 的工作流程

🎃 二、使用 Antd 实现 TodoList 页面布局

1、在项目中使用 Antd

2、使用 Antd 实现 TodoList 的基本布局

3、创建 redux 中的 store

（1）创建 store

（2）在项目中使用 store

🧵 三、Action 和 Reducer 的编写 - 增添功能

1、主体页面内容改造

2、改变 action 中的数据

3、store 数据改造

🧶 四、使用 Redux 实现 TodoList 的删除功能

1、对组件进行事件绑定

2、在 reducer 中进行数据通信

👓 五、逻辑归纳

1、ActionTypes 的拆分

2、使用 actionCreator 统一创建 action

👔 六、Redux 的一些总结

1、Redux 设计和使用的三项原则

2、Redux 的核心 API

👝 七、进阶组件的拆分

1、UI 组件和容器组件的拆分

2、无状态组件

🎩 八、Redux 发起异步请求

1、Redux 中发送异步请求数据

2、Redux-thunk 中间件

（1）解决什么问题

（2）如何使用

（3）为什么要使用 redux-thunk ？

（4）什么是 Redux-thunk 中间件？

💼 九、Redux 的其他中间件

1、Redux-logger

2、Redux-saga

（1）Redux-saga 是什么

（2）Redux-saga 如何使用

🛵 十、React-Redux

1、React-Redux 是什么

2、React-Redux 的使用

（1）安装 React-Redux

（2）项目目录

（3）核心内容

🚦 十一、结束语

🐣 彩蛋 One More Thing

（：往期推荐