Question

我正在试图弄清楚如何在redux中为商店设置初始状态。我以https://github.com/reactjs/redux/blob/master/examples/todos-with-undo/reducers/index.js为例。我试图修改代码，以便todos初始化了一个值。

const todoApp = combineReducers({
  todos,
  visibilityFilter
}, {
  todos: [{id:123, text:'hello', completed: false}]
})

遵循文档：http://redux.js.org/docs/api/createStore.html

但它不起作用，我不太清楚为什么。

Answer 1

它必须是import { Component } from '@angular/core'; import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; import { viewNavbarComponent } from './view-navbar.component'; import { viewHeaderComponent } from './view-header.component'; @Component({ selector: 'my-component', template: ` <nav> <a [routerLink]="['ViewNavBar']">View navbar</a> <a [routerLink]="['ViewHeader']">View </a> </nav> <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES], providers: [ ROUTER_PROVIDERS ] }) @RouteConfig([ { path: '/viewNavBar', name: 'ViewNavBar', component: viewNavbarComponent, }, { path: '/viewHeader', name: 'ViewHeader', component: viewHeaderComponent } ]) export class AppComponent { }的第二个参数：

createStore

Answer 2

您可以在减速器中设置初始状态。

const initialTodos = [{id:123, text:'hello', completed: false}]

// this is the ES2015 syntax for setting a default value for state in the function parameters
function todoReducer(state = initialTodos, action) {
  switch(action.type) {
    ... 
  }
  return state
}


const todoApp = combineReducers({
  // todos now defaults to the array of todos that you wanted and will be updated when you pass a new set of todos to the todoReducer
  todos: todoReducer,
  visibilityFilter
})

Answer 3

到目前为止，有很多很好的答案，但让我来做个蛋糕吧；也许是为了给您进行深入的分析，以便您不仅复制有效的StackOverflow代码，而且不知道您的程序为何运行。

有两种主要方法可以完成此任务： 1.使用createStore方法。它需要一个可选的第二个参数（preloadedState值）

const store = createStore(counter) // createStore without preloadedState
const initialState = {} // or in your case:
const initialState = {
                         initialTodos = [{id:123, text:'hello', completed: false}]
                     }
const store = createStore(counter, initialState) // create store with preloadedState

如果您在没有createStore的情况下呼叫preloadedState，则会初始化state to {} 因此，化简器将收到undefined作为其状态值。这将我们带到第二种方法。

您可以在reducers上进行设置。 Reducers还可以通过查看传入的initialState来设置state argument (which would be undefined（如果未使用createStore来调用initialState）并返回它们希望用作默认值的值。

const initialState = {} // a common pattern but in your case:
const initialState = {
                         initialTodos = [{id:123, text:'hello', completed: false}]
                     }
function todoReducer(state = initialState, action) {
  switch (action.type) {
    case // your type:
      return ...
    default:
      return state
  }
}

在有大量数据的情况下，方法2的缺点显而易见。就像一个庞大的待办事项清单，例如您要作为initialState“应用范围”传递。方法2会带来很多重复，因为您必须在所有减速器上执行相同的操作。这是主要缺点。但是，当您只想设置initialState as {}时，它是很流行的。

为了更好的理解，这里有4分钟的阅读时间：https://dev.to/lawrence_eagles/how-to-properly-set-initial-state-in-redux-78m

Answer 4

每个@ctrlplusb答案，之所以起作用是因为

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

第一个todos是一个密钥，它将第二个todos设置为reducer的返回值。减速器总是在创建商店时运行一次。这将初始化您的全局存储。

创建商店时会调度一个动作。这就是每个合并的reducer中提供的初始状态如何在商店中初始化的方式。如果您检查redux开发工具，您会看到调度的第一个操作是“ @@ redux / INIT {something}”

在redux的文档中，文件结尾附近有一个dispatch（{type：ActionTypes.INIT}）

在此处查看https://github.com/reduxjs/redux/blob/master/src/createStore.js#L281-L284

请参阅我在stackoverflow上做出的以下问题/答案，以澄清响应： Different ways of initializing a react redux store's initial global state?

如何在redux

4 个答案: