• react的状态管理简单钩子方法

    一. recoil

    useProvider文件:

    1. import { atom, useRecoilState } from 'recoil';
    2.  
    3. const initState = atom({
    4.     key: 'initState',
    5.     default: {
    6.         state: [],
    7.     },
    8. })
    9.  
    10. // 将业务逻辑拆分到一个单独文件中，方便进行状态管理
    11. export interface StateProps {
    12.     id: number;
    13.     text: string;
    14.     isFinished: boolean;
    15. }
    16. export interface ActionProps {
    17.     type: string;
    18.     [key: string]: any;
    19. }
    20. export const reducer = (state: StateProps[], action: ActionProps) => {
    21.     console.log(state, action)
    22.     switch (action.type) {
    23.         case 'ADD':
    24.             return [...state, action.todo];
    25.         case 'CHANGESTATUS':
    26.             return state.map(item => {
    27.                 if (item.id === action.id) {
    28.                     return Object.assign({}, item, { isFinished: !item.isFinished })
    29.                 }
    30.                 return item;
    31.             });
    32.         default:
    33.             return state;
    34.     }
    35. }
    36.  
    37. export const useProvider = () => {
    38.     // 改变todo
    39.     const [context, dispatch]: any = useRecoilState(initState);
    40.  
    41.     const changeTodo = (id: number) => {
    42.         const todoList = reducer(context.state, { type: 'CHANGESTATUS', id: id })
    43.         dispatch({ state: todoList });
    44.     }
    45.     // 添加todo
    46.     const addTodo = (todo: StateProps) => {
    47.         const todoList = reducer(context.state, { type: 'ADD', todo })
    48.         dispatch({ state: todoList });
    49.     }
    50.     return { changeTodo, addTodo, todoList: context.state };
    51. }

    Todo组件:

    1. import { TodoInput } from "./TodoInput";
    2. import { TodoList } from "./TodoList";
    3.  
    4. // 父组件
    5. export const Todo = () => {
    6.     return (
    7.         <>
    8.             <TodoInput />
    9.             <TodoList  />
    10.         </>
    11.     )
    12. }

    TodoInput组件:

    1. import { useState } from "react";
    2. import _ from 'lodash';
    3. import { useProvider } from "./useProvider";
    4.  
    5.  
    6. // 子组件
    7. export const TodoInput = () => {
    8.     const [text, setText] = useState('');
    9.     const {addTodo} = useProvider();
    10.     const handleChangeText = (e: React.ChangeEvent) => {
    11.         setText((e.target as HTMLInputElement).value);
    12.     }
    13.     const handleAddTodo = () => {
    14.         if (!text) return;
    15.         addTodo({
    16.             id: new Date().getTime(),
    17.             text: text,
    18.             isFinished: false,
    19.         })
    20.         setText('');
    21.     }
    22.     return (
    23.         <div className="todo-input">
    24.             <input type="text" placeholder="请输入代办事项" onChange={handleChangeText} value={text} />
    25.             <button style={{ marginLeft: '10px' }} onClick={handleAddTodo} >+添加</button>
    26.         </div>
    27.     )
    28. }

    TodoItem组件:

    1. import { useProvider } from "./useProvider";
    2. import _ from 'lodash';
    3.  
    4. // 孙子组件
    5. export const TodoItem = ({ todo }: {
    6.     todo:any;
    7.     key: any;
    8. }) => {
    9.     const {changeTodo} = useProvider();
    10.     // 改变事项状态
    11.     const handleChange = () => {
    12.         changeTodo(_.get(todo, 'id'));
    13.     }
    14.     return (
    15.         <div className="todo-item">
    16.             <input type="checkbox" checked={todo.isFinished} onChange={handleChange} />
    17.             <span style={{ textDecoration: todo.isFinished ? 'line-through' : 'none' }}>{todo.text}</span>
    18.         </div>
    19.     )
    20. }

    TodoList组件:

    1. import { TodoItem } from "./TodoItem";
    2. import { useProvider } from "./useProvider";
    3. import _ from 'lodash';
    4.  
    5. export const TodoList = () => {
    6.     const {todoList} = useProvider();
    7.     return (
    8.         <div className="todo-list">
    9.             {_.map(todoList, item => <TodoItem key={_.get(item, 'id')} todo={item||{}} />)}
    10.         </div>
    11.     )
    12. }

    然后在App组件引入Todo组件

    1. import { RecoilRoot } from 'recoil';
    2. import './App.css';
    3. import React from 'react';
    4. import ErrorBoundary from './ErrorBoundary';
    5. import { Todo } from './recoilProvider/Todo';
    6.  
    7.  
    8.  
    9. const App:React.FC = ()=> {
    10.   return (
    11.     <RecoilRoot>
    12.       <ErrorBoundary>
    13.         <React.Suspense fallback={<div>Loading...</div>}>
    14.           <div className='App'>
    15.             <Todo />
    16.           </div>
    17.         </React.Suspense>
    18.       </ErrorBoundary>
    19.   </RecoilRoot>
    20.   );
    21. }
    22.  
    23. export default App;

    效果图如下:

    二.context状态管理:

    useProvider文件:

    1. import { createContext, useContext } from "react";
    2.  
    3. // 将业务逻辑拆分到一个单独文件中，方便进行状态管理
    4. export interface StateProps {
    5.     id: number;
    6.     text: string;
    7.     isFinished: boolean;
    8. }
    9. export interface ActionProps {
    10.     type: string;
    11.     [key: string]: any;
    12. }
    13. export const reducer = (state: StateProps[], action: ActionProps) => {
    14.     console.log(state, action)
    15.     switch (action.type) {
    16.         case 'ADD':
    17.             return [...state, action.todo];
    18.         case 'CHANGESTATUS':
    19.             return state.map(item => {
    20.                 if (item.id === action.id) {
    21.                     return Object.assign({}, item, { isFinished: !item.isFinished })
    22.                 }
    23.                 return item;
    24.             });
    25.         default:
    26.             return state;
    27.     }
    28. }
    29.  
    30.  
    31. export interface ContextProps {
    32.     state: StateProps[];
    33.     dispatch: React.Dispatch<ActionProps>;
    34. }
    35. // const MyContext = createContext<ContextProps | null>(null); // 泛型写法
    36. export const MyContext = createContext({} as ContextProps); // 断言写法
    37.  
    38. export const useProvider = () => {
    39.     // 改变todo
    40.     const context = useContext(MyContext);
    41.     const changeTodo = (id: number) => {
    42.         context.dispatch({ type: 'CHANGESTATUS', id: id });
    43.     }
    44.     // 添加todo
    45.     const addTodo = (todo: StateProps) => {
    46.         context.dispatch({ type: 'ADD', todo });
    47.     }
    48.     return { changeTodo, addTodo, todoList: context.state, context };
    49. }

    ContextProvider文件:

    1. import { useContext, useReducer } from "react";
    2. import { MyContext, StateProps, reducer } from "./useProvider";
    3.  
    4.  
    5. const ContextProvider = (props: React.PropsWithChildren<{}>) => {
    6.     const context = useContext(MyContext);
    7.     const initState: StateProps[] = context.state || [];
    8.     const [state, dispatch] = useReducer(reducer, initState);
    9.  
    10.     return (
    11.         <MyContext.Provider value={{ state, dispatch }} >
    12.             {/* 插槽内容 */}
    13.             {props.children}
    14.         </MyContext.Provider>
    15.     )
    16. }
    17.  
    18. export default ContextProvider;

    Todo组件:

    1. import ContextProvider from "./ContextProvider";
    2. import { TodoInput } from "./TodoInput";
    3. import { TodoList } from "./TodoList";
    4.  
    5. // 父组件
    6. export const Todo = () => {
    7.     return (
    8.         <ContextProvider>
    9.             <TodoInput />
    10.             <TodoList  />
    11.         </ContextProvider>
    12.     )
    13. }

    TodoInput,  TodoItem和TodoList 组件不变(使用recoil那块的文件代码)

    App组件使用:

    直接使用就行;

    效果图如下:

    点击添加按钮,新增一列,点击多选框(选中)中划线一行,取消选中该行就恢复正常

    三. redux

    1-1. 普通方式

    useProvider文件:

    1. import { useState } from "react";
    2. import { createStore } from "redux";
    3.  
    4. // 将业务逻辑拆分到一个单独文件中，方便进行状态管理
    5. export interface StateProps {
    6.   id: number;
    7.   text: string;
    8.   isFinished: boolean;
    9. }
    10. export interface ActionProps {
    11.   type: string;
    12.   [key: string]: any;
    13. }
    14. export const reducer = (
    15.   state: StateProps[],
    16.   action: ActionProps
    17. ) => {
    18.   console.log(state, action);
    19.   switch (action.type) {
    20.     case "ADD":
    21.       return [...state, action.todo];
    22.     case "CHANGESTATUS":
    23.       return state.map((item) => {
    24.         if (item.id === action.id) {
    25.           return Object.assign({}, item, { isFinished: !item.isFinished });
    26.         }
    27.         return item;
    28.       });
    29.     default:
    30.       return state;
    31.   }
    32. };
    33.  
    34. export interface ContextProps {
    35.   state: StateProps[];
    36.   dispatch: React.Dispatch<ActionProps>;
    37. }
    38.  
    39. export const store = createStore(reducer, []);
    40. export const useProvider = () => {
    41.     const[todoList, setTodoList] = useState(store.getState())
    42.     // 改变todo
    43.     const changeTodo = (id: number) => {
    44.         store.dispatch({ type: 'CHANGESTATUS', id: id });
    45.     }
    46.     // 添加todo
    47.     const addTodo = (todo: StateProps) => {
    48.         store.dispatch({ type: 'ADD', todo });
    49.     }
    50.     store.subscribe(()=> {
    51.         setTodoList(store.getState())
    52.     })
    53.  
    54.     return { changeTodo, addTodo, todoList, store };
    55. }
    56.

    ReduxProvider.tsx文件:

    1. import { Provider } from "react-redux";
    2. import { store } from "./useProvider";
    3.  
    4. const ReduxProvider = (props) => {
    5.   return <Provider store={store}>{props.children}</Provider>;
    6. };
    7.  
    8. export default ReduxProvider;

    Todo.tsx文件:

    1. import ReduxProvider from "./ReduxProvider";
    2. import { TodoInput } from "./TodoInput";
    3. import { TodoList } from "./TodoList";
    4.  
    5. // 父组件
    6. export const Todo = () => {
    7.     return (
    8.         <ReduxProvider>
    9.             <TodoInput />
    10.             <TodoList  />
    11.         </ReduxProvider>
    12.     )
    13. }

    TodoInput,  TodoItem和TodoList 组件不变

    App.tsx使用:

    1. const App:React.FC = ()=> {
    2.   return <Todo />
    3. }
    4.  
    5. export default App;

    缺点:

    数据更新, 视图跟着更新靠的却是store.subsribe(() => { 给useState的变量赋值 }); 不符合逻辑习惯, 理论上应该修改数据, 随之页面自动渲染, 不建议依靠store.subsribe

    效果图如下:

    2-1. @reduxjs/toolkit用法

    注意:

    1)  普通用法需要store.subscribe再赋值给useState,  通过useState的变量才能让页面正常随着数据变得更新

    2)  useDispatch, useSelector解决这个痛点

    useProvider.tsx钩子文件

    1. import {configureStore, createSlice} from '@reduxjs/toolkit'
    2. import _ from 'lodash'
    3. import { useDispatch, useSelector } from "react-redux";
    4.  
    5. // 将业务逻辑拆分到一个单独文件中，方便进行状态管理
    6. export interface StateProps {
    7.   id: number;
    8.   text: string;
    9.   isFinished: boolean;
    10. }
    11. export interface ActionProps {
    12.   type: string;
    13.   [key: string]: any;
    14. }
    15.  
    16. export const storeSlice = createSlice({
    17.   name: 'todoList',
    18.   initialState: {
    19.     value: []
    20.   },
    21.   reducers: {
    22.     toggle: (state, action) => {
    23.       const id = _.get(action, 'payload.id')
    24.       const  arr =  state.value
    25.       state.value = _.map(arr, item => {
    26.         if (item.id === id) {
    27.           return Object.assign({}, item, { isFinished: !item.isFinished });
    28.         }
    29.         return item;
    30.       })
    31.  
    32.       return state
    33.     },
    34.     add: (state, action) => {
    35.       console.log(state, action,)
    36.       const arr =  state.value as any || [] ;
    37.       const todo = _.get(action, 'payload.todo')
    38.       if(todo) {
    39.         state.value = todo? [...arr, todo]: arr
    40.       }
    41.      
    42.       return state
    43.     },
    44.   }
    45. })
    46.  
    47. export const store = configureStore({reducer: storeSlice.reducer})
    48.  
    49. export const useProvider = () => {
    50.     const { toggle, add } = storeSlice.actions;
    51.     const todoList = useSelector((state) => { 
    52.       return _.get(state, 'value');
    53.     });
    54.     const dispatch = useDispatch();
    55.     // 改变todo
    56.     const changeTodo = (id: number) => {
    57.         dispatch((toggle({ id })));
    58.     }
    59.     // 添加todo
    60.     const addTodo = (todo: StateProps) => {
    61.         dispatch(add({ todo }));
    62.     }
    63.  
    64.     return { changeTodo, addTodo, todoList, store };
    65. }
    66.

    ReduxProvider组件

    1. import { Provider } from "react-redux";
    2. import { store } from "./useProvider";
    3.  
    4. const ReduxProvider = (props) => {
    5.   return <Provider store={store}>{props.children}</Provider>;
    6. };
    7.  
    8. export default ReduxProvider;

    Todo组件

    1. import ReduxProvider from "./ReduxProvider";
    2. import { TodoInput } from "./TodoInput";
    3. import { TodoList } from "./TodoList";
    4.  
    5. // 父组件
    6. export const Todo = () => {
    7.     return (
    8.         <ReduxProvider>
    9.             <TodoInput />
    10.             <TodoList  />
    11.         </ReduxProvider>
    12.     )
    13. }

     TodoInput,  TodoItem和TodoList 组件不变

    App.tsx使用:

    1. const App:React.FC = ()=> {
    2.   return <Todo />
    3. }
    4.  
    5. export default App;

    效果图如下:

    3-1. redux-presist长效存储

    useProvider文件:

    1. import { configureStore, createSlice } from "@reduxjs/toolkit";
    2. import _ from "lodash";
    3. import { useDispatch, useSelector } from "react-redux";
    4. import { persistStore, persistReducer } from "redux-persist";
    5. import storage from "redux-persist/lib/storage";
    6.  
    7. // 将业务逻辑拆分到一个单独文件中，方便进行状态管理
    8. export interface StateProps {
    9.   id: number;
    10.   text: string;
    11.   isFinished: boolean;
    12. }
    13. export interface ActionProps {
    14.   type: string;
    15.   [key: string]: any;
    16. }
    17.  
    18. export const storeSlice = createSlice({
    19.   name: "todoList",
    20.   initialState: {
    21.     value: [],
    22.   },
    23.   reducers: {
    24.     toggle: (state, action) => {
    25.       const id = _.get(action, "payload.id");
    26.       const arr = state.value;
    27.       state.value = _.map(arr, (item) => {
    28.         if (item.id === id) {
    29.           return Object.assign({}, item, { isFinished: !item.isFinished });
    30.         }
    31.         return item;
    32.       });
    33.  
    34.       return state;
    35.     },
    36.     add: (state, action) => {
    37.       console.log(state, action);
    38.       const arr = (state.value as any) || [];
    39.       const todo = _.get(action, "payload.todo");
    40.       if (todo) {
    41.         state.value = todo ? [...arr, todo] : arr;
    42.       }
    43.  
    44.       return state;
    45.     },
    46.   },
    47. });
    48.  
    49. const reducer = storeSlice.reducer;
    50.  
    51. // 定义持久化配置
    52. const persistConfig = { key: storeSlice.name, storage };
    53. // 创建持久化reducer
    54. export const persistedReducer = persistReducer(persistConfig, reducer);
    55. export const store = configureStore({
    56.   reducer: persistedReducer, // 解决了序列化问题
    57.   middleware: (getDefaultMiddleware) =>
    58.     getDefaultMiddleware({ serializableCheck: false }),
    59. });
    60. // 创建持久化存储器
    61. export const persistor = persistStore(store);
    62.  
    63. export const useProvider = () => {
    64.   const { toggle, add } = storeSlice.actions;
    65.   const todoList = useSelector((state) => {
    66.     return _.get(state, "value");
    67.   });
    68.   const dispatch = useDispatch();
    69.   // 改变todo
    70.   const changeTodo = (id: number) => {
    71.     dispatch(toggle({ id }));
    72.   };
    73.   // 添加todo
    74.   const addTodo = (todo: StateProps) => {
    75.     dispatch(add({ todo }));
    76.   };
    77.  
    78.   return { changeTodo, addTodo, todoList, store };
    79. };

    ReduxProvider组件:

    1. import { Provider } from "react-redux";
    2. import { persistor, store } from "./useProvider";
    3. import { PersistGate } from "redux-persist/integration/react";
    4. import React from "react"; // 有些编译会还要求必须把react引入, 没有使用也要引入
    5.  
    6. const ReduxProvider = (props) => {
    7.   return (
    8.     <Provider store={store}>
    9.       <PersistGate loading={null} persistor={persistor}>
    10.         {props.children}
    11.       </PersistGate>
    12.     </Provider>
    13.   );
    14. };
    15.  
    16. export default ReduxProvider;

    Todo组件:

    1. import React from "react";
    2. import ReduxProvider from "./ReduxProvider";
    3. import { TodoInput } from "./TodoInput";
    4. import { TodoList } from "./TodoList";
    5.  
    6. // 父组件
    7. const Todo = () => {
    8.     return (
    9.         <ReduxProvider>
    10.             <TodoInput />
    11.             <TodoList  />
    12.         </ReduxProvider>
    13.     )
    14. }
    15. export default Todo;

    TodoInput,  TodoItem和TodoList 组件不变, 如果报错: Todo.tsx:8 Uncaught ReferenceError: React is not defined, 就把import React from "react";加上, 没有使用React也引入一下就不会报错了

    App.tsx组件:

    1. import React, { lazy } from "react";
    2. // import Todo from './reduxPersistProvider/Todo';
    3. const Todo = lazy(() => import("./reduxPersistProvider/Todo"));
    4.  
    5. const App: React.FC = () => {  
    6.   return <Todo />;
    7. };
    8.  
    9. export default App;

    效果图如下(就不用担心刷新页面数据就丢失了):

    适用于需要存储字典对象等功能

    4-1. 客户端: redux异步action

    redux toolkit文档地址:

    createSlice | Redux Toolkit

    useProvider.ts

    1. import {
    2.   configureStore,
    3.   createAsyncThunk,
    4.   createSlice,
    5. } from "@reduxjs/toolkit";
    6. import _ from "lodash";
    7. import { useDispatch, useSelector } from "react-redux";
    8. import { persistStore, persistReducer } from "redux-persist";
    9. import storage from "redux-persist/lib/storage";
    10. import axios from "./api";
    11.  
    12. // 异步函数
    13. export const fetchHomeMultidataAction = createAsyncThunk(
    14.   "todoList/remmend",
    15.   async (extraInfo, { dispatch }) => {
    16.     console.log(extraInfo, "dispatch", 66666666);
    17.     const { data } = await axios.get("home_page");
    18.     return data;
    19.   }
    20. );
    21.  
    22. export const clearRecommendsAction = createAsyncThunk(
    23.   "todoList/clear-recommends",
    24.   async (extraInfo, params) => {
    25.     console.log(extraInfo, params, "clear-recommends");
    26.     const arr = await Promise.resolve([]);
    27.     return arr;
    28.   }
    29. );
    30.  
    31. // 将业务逻辑拆分到一个单独文件中，方便进行状态管理
    32. export interface StateProps {
    33.   id: number;
    34.   text: string;
    35.   isFinished: boolean;
    36. }
    37. export interface ActionProps {
    38.   type: string;
    39.   [key: string]: any;
    40. }
    41.  
    42. export const storeSlice = createSlice({
    43.   name: "todoList",
    44.   initialState: {
    45.     checkboxList: [],
    46.     searchRecomments: [],
    47.     filterTag: "",
    48.   },
    49.   reducers: {
    50.     toggle: (state, action) => {
    51.       const id = _.get(action, "payload.id");
    52.       const arr = state.checkboxList;
    53.       state.checkboxList = _.map(arr, (item) => {
    54.         if (item.id === id) {
    55.           return Object.assign({}, item, { isFinished: !item.isFinished });
    56.         }
    57.         return item;
    58.       });
    59.  
    60.       return state;
    61.     },
    62.     add: (state, action) => {
    63.       const arr = (state.checkboxList as any) || [];
    64.       const todo = _.get(action, "payload.todo");
    65.       if (todo) {
    66.         state.checkboxList = todo ? [...arr, todo] : arr;
    67.       }
    68.  
    69.       return state;
    70.     },
    71.     filter: (state, { payload }) => {
    72.       console.log(payload, "payload");
    73.       state.filterTag = payload;
    74.  
    75.       return state;
    76.     },
    77.   },
    78.   // 异步处理
    79.   // extraReducers: {
    80.   //   // 处于padding状态时回调
    81.   //   [fetchHomeMultidataAction.pending](state, { payload }) {
    82.   //     console.log("正处于pending状态", state, payload);
    83.   //     return state;
    84.   //   },
    85.   //   // 处于fulfilled状态时回调
    86.   //   [fetchHomeMultidataAction.fulfilled](state, { payload }) {
    87.   //     console.log("已经处于fulfilled状态", state, payload);
    88.   //     state.searchRecomments = _.get(payload, "searchRecomments");
    89.   //     return state;
    90.   //   },
    91.   //   // 处于rejected状态时回调
    92.   //   [fetchHomeMultidataAction.rejected](state, { payload }) {
    93.   //     console.log("正处于rejected状态", state, payload);
    94.   //     return state;
    95.   //   },
    96.   //   // 清空数组
    97.   //   [clearRecommendsAction.fulfilled](state, { payload }) {
    98.   //     console.log("clearRecommendsAction--fullfilled", state, payload);
    99.   //     state.searchRecomments = [];
    100.   //     return state;
    101.   //   },
    102.   // },
    103.   extraReducers: ({ addCase }) => {
    104.     // 处于padding状态时回调
    105.     addCase(fetchHomeMultidataAction.pending, (state, { payload }) => {
    106.       console.log("正处于pending状态", state, payload);
    107.       return state;
    108.     })
    109.       // 处于fulfilled状态时回调
    110.       .addCase(fetchHomeMultidataAction.fulfilled, (state, { payload }) => {
    111.         console.log("已经处于fulfilled状态", state, payload);
    112.         state.searchRecomments = _.get(payload, "searchRecomments");
    113.         return state;
    114.       })
    115.       // 处于rejected状态时回调
    116.       .addCase(fetchHomeMultidataAction.rejected, (state, { payload }) => {
    117.         console.log("正处于rejected状态", state, payload);
    118.         return state;
    119.       })
    120.       // 清空数组
    121.       .addCase(clearRecommendsAction.fulfilled, (state, { payload }) => {
    122.         console.log("clearRecommendsAction--fullfilled", state, payload);
    123.         state.searchRecomments = [];
    124.         return state;
    125.       });
    126.   },
    127. });
    128.  
    129. const reducer = storeSlice.reducer;
    130.  
    131. // 定义持久化配置
    132. const persistConfig = { key: storeSlice.name, storage };
    133. // 创建持久化reducer
    134. export const persistedReducer = persistReducer(persistConfig, reducer);
    135. export const store = configureStore({
    136.   reducer: persistedReducer, // 解决了序列化问题
    137.   middleware: (getDefaultMiddleware) =>
    138.     getDefaultMiddleware({ serializableCheck: false }),
    139. });
    140. // 创建持久化存储器
    141. export const persistor = persistStore(store);
    142.  
    143. export const useProvider = () => {
    144.   const { add, toggle, filter } = storeSlice.actions;
    145.  
    146.   // 不同类型的 todo 列表
    147.   const getVisibleTodos = (todos, filter) => {
    148.     switch (filter) {
    149.       case "SHOW_ALL": // 全部显示
    150.         return todos;
    151.       case "SHOW_FINISHED":
    152.         return todos.filter((t) => t.isFinished);
    153.       case "SHOW_NOT_FINISH":
    154.         return todos.filter((t) => !t.isFinished);
    155.       default:
    156.         return todos;
    157.     }
    158.   };
    159.  
    160.   const todoList = useSelector((state) => {
    161.     const arr = _.get(state, "checkboxList") || [];
    162.     const filterTag = _.get(state, "filterTag");
    163.     return getVisibleTodos(arr, filterTag) as StateProps[] || [];
    164.   });
    165.   const searchRecomments = useSelector((state) => {
    166.     return _.get(state, "searchRecomments");
    167.   });
    168.   const dispatch = useDispatch();
    169.   // 改变todo
    170.   const changeTodo = (id: number) => {
    171.     dispatch(toggle({ id }));
    172.   };
    173.   // 添加todo
    174.   const addTodo = (todo: StateProps) => {
    175.     dispatch(add({ todo }));
    176.   };
    177.  
    178.   // 筛选todo列表
    179.   const onFilterTodoList = (filterTag) => {
    180.     dispatch(filter(filterTag));
    181.   };
    182.  
    183.   const showAll = () => onFilterTodoList("SHOW_ALL");
    184.   const showFinished = () => onFilterTodoList("SHOW_FINISHED");
    185.   const showNotFinish = () => onFilterTodoList("SHOW_NOT_FINISH");
    186.  
    187.   // 异步获取推荐数据
    188.   const asyncGetRemments = () => {
    189.     dispatch(fetchHomeMultidataAction([]));
    190.   };
    191.   const asyncClearRemments = () => {
    192.     dispatch(clearRecommendsAction([]));
    193.   };
    194.  
    195.   return {
    196.     changeTodo,
    197.     addTodo,
    198.     todoList,
    199.     store,
    200.     searchRecomments,
    201.     asyncGetRemments,
    202.     showAll,
    203.     showFinished,
    204.     showNotFinish,
    205.     asyncClearRemments,
    206.   };
    207. };

    ReduxProvider组件:

    1. import { Provider } from "react-redux";
    2. import { persistor, store } from "./useProvider";
    3. import { PersistGate } from "redux-persist/integration/react";
    4. import React from "react"; // 有些编译会还要求必须把react引入, 没有使用也要引入
    5.  
    6. const ReduxProvider = (props) => {
    7.   return (
    8.     <Provider store={store}>
    9.       <PersistGate loading={null} persistor={persistor}>
    10.         {props.children}
    11.       </PersistGate>
    12.     </Provider>
    13.   );
    14. };
    15.  
    16. export default ReduxProvider;

    Todo组件

    1. import React, { lazy } from "react";
    2. // import ReduxProvider from "./ReduxProvider";
    3. // import TodoList from "./TodoList";
    4. // import TodoInput from "./TodoInput";
    5.  
    6. const ReduxProvider = lazy(() => import("./ReduxProvider"));
    7. const TodoList = lazy(() => import("./TodoList"));
    8. const TodoInput = lazy(() => import("./TodoInput"));
    9.  
    10. // 父组件
    11. const Todo = () => {
    12.   return (
    13.     <ReduxProvider>
    14.       <TodoInput />
    15.       <TodoList />
    16.     </ReduxProvider>
    17.   );
    18. };
    19. export default Todo;

    TodoInput组件

    1. import React, { useState } from "react";
    2. import { useProvider } from "./useProvider";
    3. import "./TodoInput.less";
    4.  
    5. // 子组件
    6. const TodoInput = () => {
    7.   const [text, setText] = useState("");
    8.   const {
    9.     addTodo,
    10.     asyncGetRemments,
    11.     showAll,
    12.     showFinished,
    13.     showNotFinish,
    14.     asyncClearRemments,
    15.   } = useProvider();
    16.   const handleChangeText = (e: React.ChangeEvent) => {
    17.     setText((e.target as HTMLInputElement).value);
    18.   };
    19.   const handleAddTodo = () => {
    20.     if (!text) return;
    21.     addTodo({
    22.       id: new Date().getTime(),
    23.       text: text,
    24.       isFinished: false,
    25.     });
    26.     setText("");
    27.   };
    28.   return (
    29.     <div className="todo-input">
    30.       <input
    31.         type="text"
    32.         placeholder="请输入代办事项"
    33.         onChange={handleChangeText}
    34.         value={text}
    35.       />
    36.       <button onClick={handleAddTodo}>+添加</button>
    37.       <button onClick={asyncGetRemments}>异步获取推荐列表数据</button>
    38.       <button onClick={asyncClearRemments}>前端清空推荐列表</button>
    39.       <button onClick={showAll}>show all</button>
    40.       <button onClick={showFinished}>show finished</button>
    41.       <button onClick={showNotFinish}>show not finish</button>
    42.     </div>
    43.   );
    44. };
    45.  
    46. export default TodoInput;

    TodoItem组件

    1. import { useProvider } from "./useProvider";
    2. import _ from 'lodash';
    3. import React from "react";
    4.  
    5. // 孙子组件
    6. export const TodoItem = ({ todo }: {
    7.     todo:any;
    8.     key: any;
    9. }) => {
    10.     const {changeTodo} = useProvider();
    11.     // 改变事项状态
    12.     const handleChange = () => {
    13.         changeTodo(_.get(todo, 'id'));
    14.     }
    15.     return (
    16.         <div className="todo-item">
    17.             <input type="checkbox" checked={todo.isFinished} onChange={handleChange} />
    18.             <span style={{ textDecoration: todo.isFinished ? 'line-through' : 'none' }}>{todo.text}</span>
    19.         </div>
    20.     )
    21. }

    TodoList组件

    1. import { TodoItem } from "./TodoItem";
    2. import { useProvider } from "./useProvider";
    3. import _ from "lodash";
    4. import React from "react";
    5.  
    6. const TodoList = () => {
    7.   const { todoList, searchRecomments } = useProvider();
    8.   return (
    9.     <>
    10.       <p>checckbox-list: </p>
    11.       <div className="todo-list">
    12.         {_.map(todoList, (item) => (
    13.           <TodoItem key={_.get(item, "id")} todo={item || {}} />
    14.         ))}
    15.       </div>
    16.       <hr/>
    17.       <p>推荐列表recommends-list: </p>
    18.       <ul className="recommends-list">
    19.         {_.map(searchRecomments, (item) => (
    20.           <li key={_.get(item, "value")}>{_.get(item, "label")}</li>
    21.         ))}
    22.       </ul>
    23.     </>
    24.   );
    25. };
    26.  
    27. export default TodoList

    App组件:

    1. import React, { Suspense, lazy } from "react";
    2. // import Todo from "./reduxAsyncProvider/Todo";
    3. import { Spin } from "antd";
    4. const Todo = lazy(() => import("./reduxAsyncProvider/Todo"));
    5.  
    6. const App: React.FC = () => {
    7.   return (
    8.     <Suspense fallback={<Spin />}>
    9.       <Todo />
    10.     </Suspense>
    11.   );
    12. };
    13.  
    14. export default App;

    api.ts文件:

    1. import axios from "axios";
    2.  
    3.  
    4. const instance = axios.create({
    5.     baseURL: '/api', // 设置请求的前缀
    6. })
    7.  
    8. instance.interceptors.response.use((response)=> {
    9.     const {data:_data} = response;
    10.     const {data, code,msg} = _data
    11.     if(code !== 0) {
    12.         console.log(code, msg, data, response)
    13.         return Promise.reject(response)
    14.     }
    15.     return response.data
    16. })
    17.  
    18. export default instance

    4-2. nodejs的mock服务器部分(也可以自行引入data/home_page.js使用):

    1) app.js

    1. const path = require('path')
    2. const jsonServer = require('json-server')
    3. const router = require('./router')
    4. const db = require('./db')()
    5.  
    6. const server = jsonServer.create()
    7.  
    8. const middlewares = jsonServer.defaults({
    9.     static: path.join(__dirname, '../public')
    10. })
    11. server.use(middlewares)
    12. // req.body
    13. server.use(jsonServer.bodyParser)
    14.  
    15.  
    16. server.use((req, res, next) => {
    17.     const json = res.json.bind(res)
    18.     res.success = (data) => {
    19.         return json({
    20.             code: 0,
    21.             msg: '请求成功',
    22.             data
    23.         })
    24.     }
    25.     res.fail = (msg, code = -1, data) => {
    26.         return json({
    27.             code,
    28.             msg,
    29.             data
    30.         })
    31.     }
    32.     next()
    33. })
    34.  
    35. router(server)
    36. const jsonRouter = jsonServer.router(db)
    37. server.use((req, res, next) => {
    38.     setTimeout(next, 1000)
    39. })
    40. server.use('/api', jsonRouter)
    41.  
    42. server.listen(8000, () => {
    43.     console.log('======JSON Server is running at 8000')
    44. })

    2) db,js => 查看获取数据路径

    1. const homePage = require('./home_page')
    2. function responseData(data) {
    3.     return {
    4.         code: 0,
    5.         msg: '请求成功',
    6.         data,
    7.     }
    8. }
    9.  
    10. module.exports = () => {
    11.     return {
    12.         // 客户端调用axios.get('/api/home_page').then(res=>{})
    13.         home_page: responseData(homePage()),
    14.     }
    15. }

    3) data/home_page.js文件:

    1. module.exports = () => {
    2.     return {
    3.       searchRecomments: [
    4.         {
    5.           value: 0,
    6.           label: '牛腩',
    7.         },
    8.         {
    9.           value: 1,
    10.           label: '色拉',
    11.         },
    12.         {
    13.           value: 2,
    14.           label: '奶茶',
    15.         },
    16.         {
    17.           value: 3,
    18.           label: '西瓜汁',
    19.         },
    20.       ],
    21.       banner: [
    22.         {
    23.           imgUrl: '/imgs/index_page/transformer-banner.png',
    24.         },
    25.       ],
    26.       transformer: [
    27.         {
    28.           label: '美食外卖',
    29.           imgUrl: '/imgs/index_page/transformer-icon1.png',
    30.         },
    31.         {
    32.           label: '超市便利',
    33.           imgUrl: '/imgs/index_page/transformer-icon2.png',
    34.         },
    35.         {
    36.           label: '美食团购',
    37.           imgUrl: '/imgs/index_page/transformer-icon3.png',
    38.         },
    39.         {
    40.           label: '丽人/医美',
    41.           imgUrl: '/imgs/index_page/transformer-icon4.png',
    42.         },
    43.         {
    44.           label: '休闲玩乐',
    45.           imgUrl: '/imgs/index_page/transformer-icon5.png',
    46.         },
    47.         {
    48.           label: '下午茶',
    49.           imgUrl: '/imgs/index_page/transformer-icon6.png',
    50.         },
    51.         {
    52.           label: '水果',
    53.           imgUrl: '/imgs/index_page/transformer-icon7.png',
    54.         },
    55.         {
    56.           label: '鲜花绿植',
    57.           imgUrl: '/imgs/index_page/transformer-icon8.png',
    58.         },
    59.         {
    60.           label: '买菜',
    61.           imgUrl: '/imgs/index_page/transformer-icon9.png',
    62.         },
    63.         {
    64.           label: '甜品饮品',
    65.           imgUrl: '/imgs/index_page/transformer-icon10.png',
    66.         },
    67.         {
    68.           label: '全城购',
    69.           imgUrl: '/imgs/index_page/transformer-icon11.png',
    70.         },
    71.         {
    72.           label: '送药上门',
    73.           imgUrl: '/imgs/index_page/transformer-icon12.png',
    74.         },
    75.         {
    76.           label: '0元领水果',
    77.           imgUrl: '/imgs/index_page/transformer-icon13.png',
    78.         },
    79.         {
    80.           label: '天天赚现金',
    81.           imgUrl: '/imgs/index_page/transformer-icon14.png',
    82.         },
    83.         {
    84.           label: '冲吧饿小宝',
    85.           imgUrl: '/imgs/index_page/transformer-icon15.png',
    86.         },
    87.       ],
    88.       scrollBarInfoList: [
    89.         {
    90.           type: 'bean',
    91.           badge: '赚豆',
    92.           detail: `今天再下<span class="info-num">1</span>单赚<span class="info-num">400</span>吃货豆`,
    93.           btn: '领任务',
    94.         },
    95.         {
    96.           type: 'hongbao',
    97.           badge: '红包',
    98.           detail: `你有<span class="info-num">4</span>张总<span class="info-num">43.5</span>元红包即将到期`,
    99.           btn: '去查看',
    100.         },
    101.       ],
    102.       countdown: {
    103.         time: 24 * 60 * 60 * 1000,
    104.         goods: {
    105.           imgUrl: '/imgs/index_page/count-down-p.png',
    106.           name: '腊鸡腿菜饭 + 卤香干 + 冰红茶',
    107.           price: 19.8,
    108.           oldPrice: 28.9,
    109.         },
    110.       },
    111.       activities: [
    112.         '/imgs/index_page/activity/01.png',
    113.         '/imgs/index_page/activity/02.png',
    114.         '/imgs/index_page/activity/03.png',
    115.       ]
    116.     }
    117.   }

    4) node服务器的package.json

    1. {
    2.   "name": "mock-server",
    3.   "version": "1.0.0",
    4.   "description": "",
    5.   "main": "index.js",
    6.   "scripts": {
    7.     "test": "echo \"Error: no test specified\" && exit 1",
    8.     "server": "nodemon delay 1000ms ./src/app.js"
    9.   },
    10.   "author": "",
    11.   "license": "ISC",
    12.   "dependencies": {
    13.     "axios": "^1.5.0",
    14.     "json-server": "^0.17.3"
    15.   },
    16.   "devDependencies": {
    17.     "nodemon": "^3.0.1"
    18.   }
    19. }

    node服务器效果图如下:

    客户端从这个node服务器获取数据的方法:

    axios.get('/api/home_page').then(res=>{}).catch(err=>{});

    在webpack.dev.js配置一下:

    1.  devServer: {
    2.         port: 8111,
    3.         progress: true,  // 显示打包的进度条
    4.         contentBase: distPath,  // 根目录
    5.         open: true,  // 自动打开浏览器
    6.         compress: true,  // 启动 gzip 压缩
    7.         // 设置代理
    8.         proxy: {
    9.             // 将本地 /api/xxx 代理到 localhost:服务器端口号1/api/xxx
    10.             '/api': 'http://localhost:8000',
    11.  
    12.             // 将本地 /api2/xxx 代理到 localhost:服务器端口号2/xxx
    13.             '/api2': {
    14.                 target: 'http://localhost:8111',
    15.                 pathRewrite: {
    16.                     '/api2': ''
    17.                 }
    18.             }
    19.         }
    20.     }

    5. connect模式

    ProviderUtils文件

    注意:

    1) 因为逻辑简单且放在一个文件对于阅读逻辑代码, 更省事, 实际项目中应该分模块整理文件

    2) connect模式未做成钩子文件, 读懂原理后可以自行改成钩子

    1. import { combineReducers, createStore } from "redux";
    2.  
    3. // 将业务逻辑拆分到一个单独文件中，方便进行状态管理
    4. export interface StateProps {
    5.   id: number;
    6.   text: string;
    7.   isFinished: boolean;
    8. }
    9. export interface ActionProps {
    10.   type: string;
    11.   [key: string]: any;
    12. }
    13. // 新增列表数据和改变数组数据
    14. export const reducer = (state: StateProps[] | [], action: ActionProps) => {
    15.   console.log(state, action);
    16.   switch (action.type) {
    17.     case "ADD":
    18.       return [...state, action.todo];
    19.     case "CHANGESTATUS":
    20.       return state.map((item) => {
    21.         if (item.id === action.id) {
    22.           return Object.assign({}, item, { isFinished: !item.isFinished });
    23.         }
    24.         return item;
    25.       });
    26.     default:
    27.       return state || [];
    28.   }
    29. };
    30.  
    31. export interface ContextProps {
    32.   state: StateProps[];
    33.   dispatch: React.Dispatch<ActionProps>;
    34. }
    35.  
    36. const todos = reducer;
    37. const visibilityFilter = (state = 'SHOW_ALL', action) => {
    38.   switch (action.type) {
    39.     // 设置显示类型（所有、完成、未完成）
    40.     case 'SET_VISIBILITY_FILTER':
    41.       return action.filter
    42.  
    43.     // 默认是 SHOW_ALL
    44.     default:
    45.       return state
    46.   }
    47. }
    48. export const combineStore = createStore(combineReducers({ todos, visibilityFilter }));
    49.  
    50. // 不同类型的 todo 列表
    51. const getVisibleTodos = (todos, filter) => {
    52.   switch (filter) {
    53.     case "SHOW_ALL": // 全部显示
    54.       return todos;
    55.     case "SHOW_FINISHED":
    56.       return todos.filter((t) => t.isFinished);
    57.     case "SHOW_NOT_FINISH":
    58.       return todos.filter((t) => !t.isFinished);
    59.     default:
    60.       return todos;
    61.   }
    62. };
    63.  
    64. export const mapStateToProps = (state) => {
    65.   return {
    66.     // 根据完成状态，筛选数据
    67.     todoList: getVisibleTodos(state.todos, state.visibilityFilter),
    68.   };
    69. };
    70.  
    71. export const mapDispatchToProps = (dispatch) => {
    72.   const changeTodo = (id: number) => {
    73.     dispatch({ type: "CHANGESTATUS", id });
    74.   };
    75.   // 添加todo
    76.   const addTodo = (todo: StateProps) => {
    77.     dispatch({ type: "ADD", todo });
    78.   };
    79.  
    80.   // 显示已完成的
    81.   const showFinished = () => {
    82.     dispatch({ type: "SET_VISIBILITY_FILTER", filter: 'SHOW_FINISHED' });
    83.   }
    84.   // 显示未完成的
    85.   const showNotFinish = () => {
    86.     dispatch({ type: "SET_VISIBILITY_FILTER", filter: 'SHOW_NOT_FINISH' });
    87.   }
    88.   // 显示全部完成的
    89.   const showAll = () => {
    90.     dispatch({ type: "SET_VISIBILITY_FILTER", filter: 'SHOW_ALL' });
    91.   }
    92.  
    93.  
    94.   return {
    95.     addTodo,
    96.     // 切换完成状态
    97.     changeTodo,
    98.     showFinished,
    99.     showNotFinish,
    100.     showAll,
    101.   };
    102. };

    ReduxProvider组件

    1. import { Provider } from "react-redux";
    2. import {combineStore} from './ProviderUtils';
    3.  
    4. const ReduxProvider = (props) => {
    5.   return <Provider store={combineStore}>{props.children}</Provider>;
    6. };
    7.  
    8. export default  ReduxProvider

    Todo组件

    1. import ReduxProvider from "./ReduxProvider";
    2. import { TodoInput } from "./TodoInput";
    3. import { TodoList } from "./TodoList";
    4.  
    5. // 父组件
    6. export const Todo = () => {
    7.     return (
    8.         <ReduxProvider>
    9.             <TodoInput />
    10.             <TodoList  />
    11.         </ReduxProvider>
    12.     )
    13. }

    TodoInput组件

    1. import { useState } from "react";
    2. import _ from "lodash";
    3. import { mapDispatchToProps, mapStateToProps } from "./ProviderUtils";
    4. import { connect } from "react-redux";
    5.  
    6. // 子组件
    7. const TodoInput0 = (props) => {
    8.   const [text, setText] = useState("");
    9.   const { addTodo, showAll, showFinished, showNotFinish } = props;
    10.   const handleChangeText = (e: React.ChangeEvent) => {
    11.     setText((e.target as HTMLInputElement).value);
    12.   };
    13.   const handleAddTodo = () => {
    14.     if (!text) return;
    15.     addTodo({
    16.       id: new Date().getTime(),
    17.       text: text,
    18.       isFinished: false,
    19.     });
    20.     setText("");
    21.   };
    22.   return (
    23.     <div className="todo-input">
    24.       <input
    25.         type="text"
    26.         placeholder="请输入代办事项"
    27.         onChange={handleChangeText}
    28.         value={text}
    29.       />
    30.       <button style={{ marginLeft: "10px" }} onClick={handleAddTodo}>
    31.         +添加
    32.       </button>
    33.       <button style={{ marginLeft: "10px" }} onClick={showAll}>
    34.         show all
    35.       </button>
    36.       <button style={{ marginLeft: "10px" }} onClick={showFinished}>
    37.         show finished
    38.       </button>
    39.       <button style={{ marginLeft: "10px" }} onClick={showNotFinish}>
    40.         show not finish
    41.       </button>
    42.     </div>
    43.   );
    44. };
    45.  
    46. const TodoInput = connect(mapStateToProps, mapDispatchToProps)(TodoInput0);
    47. export { TodoInput };

    TodoItem组件

    1. import { mapDispatchToProps, mapStateToProps } from "./ProviderUtils";
    2. import _ from "lodash";
    3. import { connect } from "react-redux";
    4.  
    5. // 孙子组件
    6. const TodoItem0 = (props) => {
    7.   const { todo, changeTodo } = props;
    8.   // 改变事项状态
    9.   const handleChange = () => {
    10.     changeTodo(_.get(todo, "id"));
    11.   };
    12.   return (
    13.     <div className="todo-item">
    14.       <input
    15.         type="checkbox"
    16.         checked={todo.isFinished}
    17.         onChange={handleChange}
    18.       />
    19.       <span
    20.         style={{ textDecoration: todo.isFinished ? "line-through" : "none" }}
    21.       >
    22.         {todo.text}
    23.       </span>
    24.     </div>
    25.   );
    26. };
    27. const TodoItem = connect(mapStateToProps, mapDispatchToProps)(TodoItem0);
    28. export { TodoItem };

    TodoList组件

    1. import { TodoItem } from "./TodoItem";
    2. import _ from "lodash";
    3. import { connect } from "react-redux";
    4. import { mapDispatchToProps, mapStateToProps } from "./ProviderUtils";
    5.  
    6. const TodoList0 = (props) => {
    7.   const { todoList } = props;
    8.  
    9.   return (
    10.     <div className="todo-list">
    11.       {_.map(todoList, (item) => (
    12.         <TodoItem key={_.get(item, "id")} todo={item || {}} />
    13.       ))}
    14.     </div>
    15.   );
    16. };
    17.  
    18. const TodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList0);
    19. export { TodoList };

    App组件使用:

    1. const App:React.FC = ()=> {
    2.   return <Todo />
    3. }
    4.  
    5. export default App;

    connect模式梳理一下流程:

    1.  ProviderUtils文件: 定义combineStore:
    1. 1) 引入import { combineReducers, createStore } from "redux";
    2.  
    3. 2)  定义reducer方法们:
    4.  
    5. // todos:新增,修改列表方法(返回列表数据, 否则返回state)
    6.  
    7. const todos = (state: StateProps[] | [], action: ActionProps) => {
    8.   console.log(state, action);
    9.   switch (action.type) {
    10.     case "ADD":
    11.       return [...state, action.todo];
    12.     case "CHANGESTATUS":
    13.       return state.map((item) => {
    14.         if (item.id === action.id) {
    15.           return Object.assign({}, item, { isFinished: !item.isFinished });
    16.         }
    17.         return item;
    18.       });
    19.     default:
    20.       return state || [];
    21.   }
    22. };
    23.  
    24. // visibilityFilter: 筛选列表方法(返回筛选器, 否则返回state)
    25.  
    26. const visibilityFilter = (state = 'SHOW_ALL', action) => {
    27.   switch (action.type) {
    28.     // 设置显示类型（所有、完成、未完成）
    29.     case 'SET_VISIBILITY_FILTER':
    30.       return action.filter
    31.     default:
    32.       return state
    33.   }
    34. }
    35.  
    36. 3) 得到combineStore
    37.  
    38. export const combineStore = createStore(combineReducers({ todos, visibilityFilter }));

    2. 完成ReduxProvider组件

    1) Provider从 "react-redux"获取;

    2) combineStore从第1步获取

    const ReduxProvider = (props) => {

            return {props.children};

    };

    3. 使用ReduxProvider:

    export const Todo = () => {
        return (
           
               
               
           
        )
    }

    4. 子组件们使用connect:

    import { connect } from "react-redux";

    const 子组件-新 = connect(mapStateToProps, mapDispatchToProps)(子组件);

    export default 子组件-新;

    注意: 因为子组件们使用了mapStateToProps, mapDispatchToProps, 可以直接写在子组件, 也可以写在公共文件

    5. 追加mapStateToProps, mapDispatchToProps方法到ProviderUtils文件中

    本文为了减少文件, 追加到ProviderUtils文件中

    1. // 不同类型的 todo 列表
    2. const getVisibleTodos = (todos, filter) => {
    3.   switch (filter) {
    4.     case "SHOW_ALL": // 全部显示
    5.       return todos;
    6.     case "SHOW_FINISHED":
    7.       return todos.filter((t) => t.isFinished);
    8.     case "SHOW_NOT_FINISH":
    9.       return todos.filter((t) => !t.isFinished);
    10.     default:
    11.       return todos;
    12.   }
    13. };
    14.  
    15. export const mapStateToProps = (state) => {
    16.   return {
    17.     // 根据完成状态，筛选数据
    18.     todoList: getVisibleTodos(state.todos, state.visibilityFilter),
    19.   };
    20. };
    21.  
    22. export const mapDispatchToProps = (dispatch) => {
    23.   const changeTodo = (id: number) => {
    24.     dispatch({ type: "CHANGESTATUS", id });
    25.   };
    26.   // 添加todo
    27.   const addTodo = (todo: StateProps) => {
    28.     dispatch({ type: "ADD", todo });
    29.   };
    30.  
    31.   // 显示已完成的
    32.   const showFinished = () => {
    33.     dispatch({ type: "SET_VISIBILITY_FILTER", filter: 'SHOW_FINISHED' });
    34.   }
    35.   // 显示未完成的
    36.   const showNotFinish = () => {
    37.     dispatch({ type: "SET_VISIBILITY_FILTER", filter: 'SHOW_NOT_FINISH' });
    38.   }
    39.   // 显示全部完成的
    40.   const showAll = () => {
    41.     dispatch({ type: "SET_VISIBILITY_FILTER", filter: 'SHOW_ALL' });
    42.   }
    43.  
    44.  
    45.   return {
    46.     addTodo,
    47.     // 切换完成状态
    48.     changeTodo,
    49.     showFinished,
    50.     showNotFinish,
    51.     showAll,
    52.   };
    53. };

    6. 最后可以在子组件打印props查看:

    1) props可以正常获取本身父组件传给它的数据和方法

    2) props可以解构出mapStateToProps, mapDispatchToProps钩子return的数据变量和方法

    以TodoItem组件为例:

    1. const TodoItem0 = (props) => {
    2.     // 注意: todo是父组件直接传过来的数据, changeTodo是mapDispatchToProps钩子return出来的方法!!!
    3.   const { todo, changeTodo } = props;
    4.  
    5.   const handleChange = () => {
    6.     changeTodo(_.get(todo, "id"));
    7.   };
    8.   return (
    9.     <div className="todo-item">
    10.       <input
    11.         type="checkbox"
    12.         checked={todo.isFinished}
    13.         onChange={handleChange}
    14.       />
    15.       <span
    16.         style={{ textDecoration: todo.isFinished ? "line-through" : "none" }}
    17.       >
    18.         {todo.text}
    19.       </span>
    20.     </div>
    21.   );
    22. };
    23. const TodoItem = connect(mapStateToProps, mapDispatchToProps)(TodoItem0);
    24. export { TodoItem };

    connect模式效果图如下:

    1) 添加数据后选中某些数据

    2) 点击show finished显示被选中的那部分数据

    3) 点击show not finish显示未被选中的那些数据

    4) 点击show all展示所有数据

  • 相关阅读:
    nodejs+java+python家乡美食分享推荐网站系统vue+elementui
    Linux--环境变量
    自己封装 vue3+ts 组件库并且发布到 NPM
    实时选品系统实现的难点
    关于conda占C盘内存的问题
    个人信息保护专业人员认证（CCRC-PIPP）
    proxy代理服务
    Vue_Bug NPM下载速度过慢
    教你怎么爬元气桌面的壁纸和视频
    Python: 数据类型转换总结(list-np.array-torch.tensor)
  • 原文地址：https://blog.csdn.net/qq_42750608/article/details/132948353