Redux，帶你從入門到進階

• 🌂序言
• ??一、基礎知識
• • 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
• • （：往期推薦
  • （：番外篇

🌂序言

大家都知道， 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><ListbordereddataSource={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><ListbordereddataSource={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><Inputvalue={this.state.inputValue}placeholder="todo info"style={{ width: '300px', marginRight: '10px'}}onChange={this.handleInputChange}/><Button type="primary" onClick={this.handleBtnClick}>提交</Button></div><Liststyle={{marginTop: '10px', width: '300px'}}bordereddataSource={this.state.list}renderItem={item => <List.Item>{item}</List.Item>}/></div>)}handleInputChange(e) {// 在react中，action是一個對象的形式// type旨在告訴react說，你幫我去改變input的值，這個值是下面的value，也就是e.target.valueconst 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 ({/* 此處省略上述已有代碼 */}<Liststyle={{marginTop: '10px', width: '300px'}}bordereddataSource={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><Inputvalue={this.props.inputValue}placeholder="todo info"style={{ width: '300px', marginRight: '10px' }}onChange={this.props.handleInputChange}/><Button type="primary" onClick={this.props.handleBtnClick}>提交</Button></div><Liststyle={{ marginTop: '10px', width: '300px' }}bordereddataSource={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 (<TodoListUIinputValue={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><Inputvalue={props.inputValue}placeholder="todo info"style={{ width: '300px', marginRight: '10px' }}onChange={props.handleInputChange}/><Button type="primary" onClick={props.handleBtnClick}>提交</Button></div><Liststyle={{ marginTop: '10px', width: '300px' }}bordereddataSource={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去捕獲到每一次派發下來的actionyield 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來了」面試專欄 待你解鎖~
• 如果您覺得這篇文章有幫助到您的的話不妨點贊支持一下喲~~😉
• 以上就是本文的全部內容！我們下期見！👋👋👋

總結

以上是生活随笔為你收集整理的Redux从入门到进阶，看这一篇就够了！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。