React 项目引入 react-redux

1. 安装 react-redux

   在终端中运行以下命令来安装 react-redux：

   npm install react-redux
   

2. 创建多个 Reducer

   在应用程序的不同模块中创建多个 reducer。每个 reducer 应该负责管理应用程序状态的一部分。

   // todosReducer.js
   const initialState = [];
   
   function todosReducer(state = initialState, action) {
     switch (action.type) {
       case "ADD_TODO":
         return [...state, action.payload];
       default:
         return state;
     }
   }
   
   // visibilityFilterReducer.js
   const initialState = "SHOW_ALL";
   
   function visibilityFilterReducer(state = initialState, action) {
     switch (action.type) {
       case "SET_VISIBILITY_FILTER":
         return action.payload.filter;
       default:
         return state;
     }
   }
   

3. 合并 Reducer

   使用 combineReducers() 函数将所有 reducer 合并到一个单独的 reducer 中，并将其导出为 rootReducer。

   // rootReducer.js
   import { combineReducers } from "redux";
   import todosReducer from "./todosReducer";
   import visibilityFilterReducer from "./visibilityFilterReducer";
   
   const rootReducer = combineReducers({
     todos: todosReducer,
     visibilityFilter: visibilityFilterReducer,
   });
   
   export default rootReducer;
   

4. 创建 Redux Store

   在应用程序的根目录下，创建一个名为 store.js 的 JavaScript 文件，并使用 createStore() 函数创建 Redux store。将 rootReducer 作为参数传递给 createStore() 函数。

   // store.js
   import { createStore } from "redux";
   import rootReducer from "./reducers/rootReducer";
   
   const store = createStore(rootReducer);
   
   export default store;
   

5. 连接组件

   在需要访问 Redux store 中的状态的组件中，使用 connect() 高阶函数连接组件到 Redux store。你需要根据你的实际需求选择要连接的状态和操作。

   // TodoList.js
   import React from "react";
   import { connect } from "react-redux";
   
   function TodoList(props) {
     return (
       <ul>
         {props.todos.map((todo, index) => (
           <li key={index}>{todo}</li>
         ))}
       </ul>
     );
   }
   
   function mapStateToProps(state) {
     return {
       todos: state.todos,
     };
   }
   
   export default connect(mapStateToProps)(TodoList);
   

6. 使用 dispatch 更新状态

   如果你想在组件中更新状态，可以使用 dispatch() 函数来调用 action creator。dispatch() 函数是通过 store.dispatch() 传递下来的。

   // TodoForm.js
   import React, { useState } from "react";
   import { connect } from "react-redux";
   
   function TodoForm(props) {
     const [inputValue, setInputValue] = useState("");
   
     function handleInputChange(event) {
       setInputValue(event.target.value);
     }
   
     function handleFormSubmit(event) {
       event.preventDefault();
   
       props.addTodo(inputValue);
   
       setInputValue("");
     }
   
     return (
       <form onSubmit={handleFormSubmit}>
         <input
           type="text"
           value={inputValue}
           onChange={handleInputChange}
         />
         <button type="submit">Add Todo</button>
       </form>
     );
   }
   
   function mapDispatchToProps(dispatch) {
     return {
       addTodo: (todo) => {
         dispatch({ type: "ADD_TODO", payload: todo });
       },
     };
   }
   
   export default connect(null, mapDispatchToProps)(TodoForm);
   

这篇好文章是转载于：学新通技术网