无动作的 Redux 加法：掌握 Redux 基本原理

前端

2023-12-24 08:23:57

Redux 基础

Redux 是 JavaScript 中一个流行的状态管理库，它帮助开发人员有效地管理应用程序状态。通过使用单一的、可预测的状态树，Redux 确保了应用程序状态的一致性和可追溯性。

无 Action 的加法

Redux 中的 Action 通常被用作触发状态改变的事件。然而，在某些情况下，您可能希望在没有明确 Action 的情况下更新状态。例如，在我们的无 Action 加法案例中，我们希望通过直接修改状态来实现加法操作。

实现细节

入口文件 index.js

入口文件 index.js 负责初始化 Redux 应用程序。它创建 store（存储状态）并渲染应用程序。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore } from 'redux';

// 创建 store
const store = createStore(reducer);

// 渲染应用程序
ReactDOM.render(
  <React.StrictMode>
    <App store={store} />
  </React.StrictMode>,
  document.getElementById('root')
);

外壳文件 App.js

外壳文件 App.js 是应用程序的主组件。它从 store 中获取状态，并提供用户界面和事件处理程序。

// App.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

const App = ({ store }) => {
  // 获取 state
  const count = useSelector((state) => state.count);

  // 创建 useDispatch hook
  const dispatch = useDispatch();

  // 添加事件处理程序
  const handleIncrement = () => {
    // 直接修改 state
    dispatch({ type: 'INCREMENT' });
  };

  // 仅在组件首次挂载时获取 state
  useEffect(() => {
    console.log('初始计数：', count);
  }, [count]);

  return (
    <div>
      <h1>当前计数：{count}</h1>
      <button onClick={handleIncrement}>+</button>
    </div>
  );
};

export default App;

reducer.js

reducer.js 定义了一个纯函数，它接收当前状态和一个 action，并返回一个新状态。在无 Action 加法中，reducer 直接修改状态。

// reducer.js
const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      // 直接修改 state
      return { count: state.count + 1 };
    default:
      return state;
  }
};

store.js

store.js 创建了 Redux store，它负责存储和管理应用程序状态。

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

// 创建 store
const store = createStore(reducer);

// 导出 store
export default store;