🌂序言

大家都知道， react 是單向資料流，所以它傳遞資料也較為簡單，父子之間的關系也較為明確，但是呢，如果我們要做更多復雜資料的傳遞，單單使用 react 是完全不夠的，因此，我們需要用到 redux 來做更為復雜的資料傳遞，

那在下面的這篇文章中，將從入門到進階，講解 redux 的作業流程，

叮！開始 redux 之旅吧~👏

??一、基礎知識

1、Redux概念簡述

對于 react 來說，它是一個非視圖層的輕量級框架，如果要用它來傳遞資料的話，則要先父傳子，然后再慢慢地一層一層往上傳遞，

但如果用 redux 的話，假設我們想要某個組件的資料，那這個組件的資料則會通過 redux 來存放到 store 中進行管理，之后呢，通過 store ，再來將資料一步步地往下面的組件進行傳遞，

值得注意的是，我們可以視 Redux 為 Reducer 和 Flux 的結合，

2、Redux的作業流程

Redux ，實際上就是一個資料層的框架，它把所有的資料都放在了 store 之中，我們先來看一張圖：

大家可以看到中間的 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 ，命令如下：

npm install antd --save

第二步，引入樣式，代碼如下：

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;

此時瀏覽器的顯示效果為：

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;

此時瀏覽器的顯示效果為：

🧵三、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__() 給傳遞進去并呼叫這個方法，

最后，我們來看下瀏覽器的顯示效果：

🧶四、使用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 ，先看下圖：

現在來回顧下這幾個核心 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 ，具體命令如下：

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 中間件的這個中間，指的是 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 的使用更加地直觀和簡潔，在實際專案中，不管是 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只停留在表層？五大知識點帶你梳理進階知識

（：番外篇

• 關注公眾號星期一研究室，第一時間關注優質文章，更有 「offer來了」面試專欄 待你解鎖~
• 如果您覺得這篇文章有幫助到您的的話不妨點贊支持一下喲~~😉
• 以上就是本文的全部內容！我們下期見！👋👋👋