从 Redux 中的操作获取 reducer 中的 initialState 值答案

【问题标题】：get initialState value in reducer from action inRedux从 Redux 中的操作获取 reducer 中的 initialState 值
【发布时间】：2022-01-17 13:33:07
【问题描述】：

我是 redux 的新手，我在 reducer.jsx 中创建了一个 initialState：

const initState = {
  loading: false,
  todos: [],
  todo: null,
};

然后在 action.jsx 中，我想使用 initState 的值 'todo'。我怎样才能做到这一点。我尝试使用 useSelector 但这是不可能的，因为 useSelector 不能在行动中使用

【问题讨论】：

标签： reactjs redux action reduce

【解决方案1】：

尝试学习redux-toolkit。它比你现在发现的 redux-toolkit 中的 redux 和 createSlice api 更容易学习。

https://redux-toolkit.js.org/api/createslice

【讨论】：

稍后我会尝试redux-toolkit，但是我想在这个项目中使用Redux核心:(

【解决方案2】：

首先使用 redux 创建商店，然后安装 react-redux 库以使用 react 进行状态管理。按照下面的代码一步一步来。

步骤 - 1

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

const store = createStore(rootReducer);

export default store;

步骤 - 2

// rootReducer.js
import { combineReducers } from 'redux';
import todosReducer from './todosReducer';

const rootReducer = combineReducers({
 todos: todosReducer,
});

export default rootReducer;

步骤 - 3

// todosReducer.js

const initState = {
  loading: false,
  todos: [],
  todo: null,
};

const todosReducer = (state = initState, action) {
  switch(action.type) {
    case 'add_todo': {
      return [
        ...state,
        action.payload.todo
      ]
    }
    default: 
      return state;
  }
}

步骤 - 4


//todosAction.js
 export const addTodo = (todo) =>  {
    
   return({
        type:'add_todo',
        payload: {
            todo 
        }
    })
};

步骤 - 5

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

import App from './App';
import store from '../store';

ReactDOM.render(
    <Provider store={store}>
            <App />
     </Provider>,
    document.getElementById('root')
);

您可以避免自己选择文件路径。导入正确的文件路径。

步骤 - 5

// Todos.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {addTodo } from './todosActions';


const Todos = () => {
    const { todos } = useSelector(state => state.todos);
    const dispatch = useDispatch();

    useEffect(() => {
      console.log("todos", todos); // show all todos state
    } ,[])
  
   const todo = {
     id: 1,
     title: "redux is state management library"
   }

  const todoHandler = () => {
    dispatch( addTodo(todo));
  }
    return(
      <div>
       // Todos Here
       <button onClick={todoHandler}> add todo </button>
      </div>
   );

}

【讨论】：