Redux-thunk 和 Redux 安装

简介

Redux-thunk 是 Redux 中间件的一种，可以让 action creator 返回一个函数代替一个普通的 action 对象。这个函数会被 Redux-thunk middleware 拦截，该函数也可以进行异步操作并 dispatch 更多的 action。

Redux 是一个 JavaScript 应用状态管理库，允许你创建可预测的、单向的数据流。Redux 可以与任何 UI 层库或框架（如 React、Angular 或 Vue）搭配使用。

安装

安装 Reduc-thunk 和 Redux 需要使用 npm 或 yarn，命令如下：

npm install redux-thunk redux

或者

yarn add redux-thunk redux

示例

首先，我们需要创建一个 Redux store 并应用 Redux-thunk middleware。在这个例子中，我们将使用 Redux 和 React。

创建 Redux 应用状态

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';

const initialState = {
  count: 0
};

export const actionTypes = {
  COUNT_INCREMENT: 'COUNT_INCREMENT',
  COUNT_DECREMENT: 'COUNT_DECREMENT'
};

// The reducer
export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.COUNT_INCREMENT:
      return { ...state, count: state.count + 1 };
    case actionTypes.COUNT_DECREMENT:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// The action creators
export const countIncrement = () => ({ type: actionTypes.COUNT_INCREMENT });
export const countDecrement = () => ({ type: actionTypes.COUNT_DECREMENT });

// Creating the store
export const initStore = (initialState = initialState) => {
  return createStore(reducer, initialState, applyMiddleware(thunkMiddleware));
};

创建 React 组件

import { connect } from 'react-redux';
import { countIncrement, countDecrement } from '../store';

const Counter = ({ count, countIncrement, countDecrement }) => (
  <div>
    <h1>Count: {count}</h1>
    <button onClick={countIncrement}>Increment</button>
    <button onClick={countDecrement}>Decrement</button>
  </div>
);

const mapStateToProps = state => {
  return {
    count: state.count
  };
};

const mapDispatchToProps = {
  countIncrement,
  countDecrement
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

渲染 React 应用

import { Provider } from 'react-redux';
import { initStore } from '../store';
import Counter from '../components/Counter';

export default () => (
  <Provider store={initStore()}>
    <Counter />
  </Provider>
);

在这个例子中，我们首先创建了 Redux 应用状态，包括初始化状态、action 常量、reducer 和 action creators。我们也使用 applyMiddleware 方法并传入 Redux-thunk middleware，应用到 createStore 方法中。

随后，我们创建一个展示计数器的 React 组件 Counter，使用 connect 函数连接该组件到 Redux 应用状态中，并传递 mapStateToProps 和 mapDispatchToProps。

最后，我们渲染 Redux 的 Provider 组件，并传入初始化的 Redux 应用状态。展示 Counter 组件并可以使用 countIncrement 和 countDecrement action creators 来更新计数器值。

结论

Redux-thunk 和 Redux 帮助我们编写更有效和可预测的 JavaScript 应用状态管理系统。通过使用 Redux-thunk middleware，我们能够 dispatch 异步 action 以及处理其他一些副作用，使得我们的应用更加健壮和面向未来。