javascript - React Redux 状态对象属性

标签 javascript reactjs redux react-redux

我想知道为什么我的状态待办事项在 Redux 开发工具中名为 todo 而不是 todos .. 这个名字从何而来? 没有初始状态..我想知道..

我正在关注Stephen Grider udemy 类(class),但使用待办事项而不是流作为修订

为什么我必须通过state.todo而不是state.todos返回它??

My github Repo

Jsson服务器db.json文件(api文件)


        {
      "todos": [
        {
          "title": "lorem ipsum ",
          "description": "lorem ipsum",
          "id": 4
        }
      ]
    }

tod​​oReducer.js


        import _ from 'lodash';
    import {
      CREATE_TODO,
      EDIT_TODO,
      FETCH_TODO,
      FETCH_TODOS,
      DELETE_TODO
    } from '../actions/types';

    export default (state = {}, action) => {
      switch (action.type) {
        case FETCH_TODOS:
          return { ...state, ..._.mapKeys(action.payload, 'id') };
        case CREATE_TODO:
        case FETCH_TODO:
        case EDIT_TODO:
          return { ...state, [action.payload.id]: action.payload };
        case DELETE_TODO:
          return _.omit(state, action.payload);

        default:
          return state;
      }
    };

actions/index.js


        import todos from '../apis/todos';
    import history from '../history';
    import {
      SIGN_IN,
      SIGN_OUT,
      CREATE_TODO,
      EDIT_TODO,
      FETCH_TODO,
      FETCH_TODOS,
      DELETE_TODO
    } from './types';

    export const signIn = userId => {
      return { type: SIGN_IN, payload: userId };
    };

    export const signOut = () => {
      return { type: SIGN_OUT };
    };

    export const fetchTodos = () => async dispatch => {
      const response = await todos.get('/todos');

      dispatch({ type: FETCH_TODOS, payload: response.data });
    };

    export const createTodo = formValues => async dispatch => {
      const response = await todos.post('/todos', formValues);
      dispatch({ type: CREATE_TODO, payload: response.data });
      history.push('/');
    };



最佳答案

https://github.com/HosMercury/todos/blob/master/src/reducers/index.js在这里,您将列表作为待办事项而不是待办事项传递。

在这里您可以检查沙盒中的控制台 https://codesandbox.io/s/github/HosMercury/todos

关于javascript - React Redux 状态对象属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56431491/

相关文章:

javascript - 用于构建 HTML5/javascript 平板电脑应用程序的框架、设计模式和库

javascript - 它是 Ecmascript 中的错误 -/\S/.test(null) 返回 true 吗?

css - 获取即将到来的 CSS 过渡属性

javascript - 无法解析模块 "events"React-Native

javascript - react 在同一页面下载文档

javascript - RXJS : How to cancel a Subscription in Ionic 3/Angular?

javascript - 使用圆半径查找坐标来创建形状

javascript - React 和 MaterialUI - GridLayout 使用论文

reactjs - 在 redux 中使用 React Router 时如何修复黑屏

javascript - webpack 无法在部署时解析 Reactjs 应用程序中的文件夹