Question

我正在React和Redux中构建一个“待办事项列表”应用程序。我在开发过程中建立了一些减速器，例如“铲斗”，“待办事项”等。 'bucket'还原器似乎可以很好地拾取应用程序的initialState，而其他还原器则不能（它们的控制台为空数组）。我不知道为什么。

我的index.js文件

import todoApp from './reducers/index.js';
import App from './components/App';
import React from 'react';
import {render} from 'react-dom';
import {createStore} from 'redux';
import {Provider} from 'react-redux';

const initialState = {
    buckets: [
        {   
            name: 'Test Bucket',
            id: 0,
            visibilityFilter: "SHOW_ALL",
            todos: [
                {
                    id: 0,
                    text: "This is a test",
                    completed: true
                },
                {
                    id: 1,
                    text: "Random entry",
                    completed: true
                },
                {
                    id: 2,
                    text: 'Another random entry',
                    completed: false
                }
            ]
        },
        {   
            name: 'Default',
            id: 1,
            visibilityFilter: "SHOW_ALL",
            todos: [
                {
                    id: 0,
                    text: "Alpha Beta Gamma",
                    completed: true
                },
                {
                    id: 1,
                    text: "Lorem Ipsum",
                    completed: true
                },
                {
                    id: 2,
                    text: 'Something Something',
                    completed: false
                }
            ]
        },
    ]
};

let store = createStore(todoApp, initialState);

render(
    <Provider store={store}>
            <App />
    </Provider>,
    document.querySelector("#root")
);

我的Reducers文件

import { VisibilityFilters } from '../actions/index.js';
import {combineReducers} from 'redux';

function buckets(state = [], action) {
  console.log('buckets',state);
  switch (action.type) {
    case 'ADD_BUCKET': {
      return [...state, {
        name: action.text,
        id: action.id,
        visibilityFilter: "SHOW_ALL",
        todos: []
      }];
    }

    default: {
      return state;
    }
  }
}

function todos(state = [], action) {
  console.log('todos',state);
  switch (action.type) {
    case 'ADD_TODO': {
      return [...state, {
        text: action.text,
        completed: false,
        id: action.id
      }];
    }

    case 'TOGGLE_TODO': {
      return state.map((todo, id) => {
        if (id === action.id) {
          return Object.assign({}, todo, {
            completed: !todo.completed
          });
        }

        return todo;
      });
    }

    default: {
      return state;
    }
  }
}

function visibilityFilter(state = VisibilityFilters.SHOW_ALL, action) {
  console.log('visibilityFilter',state);
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER': {
      return action.filter;
    }

    default: {
      return state
    }
  }
}

let todoApp = combineReducers({
  visibilityFilter,
  todos,
  buckets
});

export default todoApp;

我的github存储库：https://github.com/iamrkcheers/ToDoList

感谢您的帮助。谢谢。

Answer 1

由于某种原因，将初始状态传递给createStore（）函数对我也不起作用。您可以通过以下方式设置初始状态：

将初始状态设置为化简函数中状态的默认值（例如：runction reducerX（state = initialState，action）
返回化简器中默认情况的初始状态（例如默认值：{return initialState;}）

减速器未获取Redux中的初始状态

1 个答案: