开始使用原生 Redux 应用

传统上，编程教程和书籍都会从一个“Hello World”示例开始。我们也可以这么做，但不如从一个更有趣的例子入手。

来看看下面这个应用：

我们有 Flappy 这只猫，它的状态可以通过简单的按钮点击来切换。真是幸运！

页面底部有 7 个按钮，点击任意一个都会改变这只猫的情绪状态。不妨点几下试试，然后再回来。

应用的主要组成部分

上面这个应用是使用标准 Redux 构建的，因此它有两个核心组成部分。

1. Redux 的核心组件

在应用入口文件 index.js 中，已经创建了主要的 Redux 组件：store、reducer 和 action 创建函数。

store 使用标准的 createStore 方法创建：

1import { createStore } from "redux";
2const store = createStore(reducer);

其中 reducer 的定义如下：

1export const reducer = (state = INITIAL_STATE, action) => {
2  switch (action.type) {
3    case UPDATE_MOOD:
4      return { ...state, mood: action.payload };
5
6    default:
7      return state;
8  }
9};

INITIAL_STATE 和 UPDATE_MOOD 是常量，定义如下：

1export const UPDATE_MOOD = "UPDATE_MOOD";
2
3export const MOODS = {
4  SAD: "sad",
5  SHOCKED: "shocked",
6  HAPPY: "happy",
7  BLISSFUL: "blissful",
8  LOVESTRUCK: "lovestruck",
9  EXCITED: "excited",
10  KO: "ko",
11};
12const INITIAL_STATE = { mood: MOODS.SAD };

这属于标准的 Redux 用法，没有特别之处。reducer 根据分发的动作类型判断，返回新的状态。

应用的状态对象结构如下：

1{mood: 'sad' | 'shocked' | 'happy' | 'blissful' | 'lovestruck' | 'excited' | 'ko'}

要更新状态，需要一个 action 创建函数，也就是能发出特定结构动作的函数。以下是用于更新猫情绪的 action 创建函数：

1export const updateCatMood = (payload) => ({
2  type: UPDATE_MOOD,
3  payload,
4});

非常简单。

2. 集成 Redux

应用的第二个核心部分是将 Redux 集成到应用中。如果这些 Redux 组件没有被集成，它们将无法发挥作用。

第一步是设置一个 Provider，使 Redux 状态可以在整个组件树中被访问。这里使用的是 react-redux。

1// index.js 
2import { Provider } from "react-redux";
3
4// ... 
5
6ReactDOM.render(
7  <React.StrictMode>
8    {/* 看这里 👇 */}
9    <Provider store={store}>
10      <App />
11    </Provider>
12  </React.StrictMode>,
13  document.getElementById("root")
14);

完成这一步后，接下来就是从 Redux store 中获取当前情绪，并在按钮点击时分发 updateCatMood 动作。

1// App.js
2import { useDispatch, useSelector } from "react-redux";
3
4function App() {
5  // 用于分发动作
6  const dispatch = useDispatch();
7  // 获取当前情绪
8  const currentMood = useSelector((state) => state.mood);
9
10  // ...
11}

真正的动作分发过程如下：

1// App.js 
2// ...
3
4const handleMoodUpdate = (evt) => {
5    // 'type' 是猫的一种情绪，例如 'sad'
6    const mood = evt.target.dataset.type;
7    dispatch(updateCatMood(mood));
8};
9// ... 
10<button onClick={handleMoodUpdate}> {mood} </button>

就这样！

虽然比普通的“Hello World”稍微复杂一些，但恰到好处地平衡了简单与复杂性，同时还有一定的趣味性。