Как установить начальное состояние в 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

но это не работает, и я не совсем уверен, почему.

Ответ 1

Это должен быть второй аргумент для createStore:

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

const initialState = { 
  todos: [{id:123, text:'hello', completed: false}] 
};

const store = createStore(
  rootReducer, 
  initialState
);

Ответ 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
})

Ответ 3

за ответ @ctrlplusb, причина этого работает потому, что

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

первый todos - это ключ, который устанавливает второй todos как возвращаемое значение из редуктора. Редукторы всегда запускаются один раз при создании магазина. Это инициализирует ваш глобальный магазин.

Там действие отправляется при создании магазина. Таким образом, исходное состояние каждого комбинированного редуктора инициализируется в хранилище. Если вы проверите инструменты для создания редуктора, вы увидите первое отправленное действие: "@@redux/INIT {кое-что}"

В избыточной документации, ближе к концу файла, есть отправка ({type: ActionTypes.INIT})

Смотрите здесь https://github.com/reduxjs/redux/blob/master/src/createStore.js#L281-L284

Посмотрите на этот вопрос/ответ, который я сделал на stackoverflow, разъясняя ответ: различные способы инициализации начального глобального состояния реагирующего хранилища?

Ответ 4

У вас есть синтаксическая ошибка.
просто введите начальное состояние в создателе действия и вызовите его на компонентеWillMount
сделать редуктор: экспорт функции по умолчанию() {return todo: ['read', 'eat', 'sleep'];} 4: чтобы вы поняли es6 используется при ударе кода.

//es6 is used in code below check code below for simple example


import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'

const todoApp = combineReducers({
  todos,
  visibilityFilter
})

export default todoApp
  
//this is the same as
 const todoApp = combineReducers({
  todos: todoReducer,
  visibilityFilter: visibilityFilterReducer
})
 
 export default todoApp