cómo establecer el estado inicial en redux

Solución:

Debe ser el segundo argumento para createStore:

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

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

const store = createStore(
  rootReducer, 
  initialState
);

Puede establecer el estado inicial en los reductores.

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
})

Hasta ahora ha habido excelentes respuestas, pero déjeme enfriar el pastel; tal vez para brindarle un análisis en profundidad, para que no solo copie los códigos de StackOverflow “ que funcionan, pero no sepa por qué su programa está funcionando.

Hay dos formas principales de lograr esta visualización: 1. utilizando el método createStore. Toma un segundo argumento opcional (el valor 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

si llamas createStore sin el preloadedState inicializaría el state to {}
Por lo tanto, los reductores recibirán undefined como sus valores estatales. Eso nos lleva al segundo método.

2. Puede configurarlo en el reducers. Reducers también puede configurar initialState mirando el entrante state argument (which would be undefined si createStore no se llama con initialState) y devolviendo los valores que les gustaría usar como predeterminados.

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
  }
}

El inconveniente del método 2 es evidente en un caso en el que hay datos enormes; como una enorme lista de tareas pendientes, por ejemplo, que desea pasar como initialState “en toda la aplicación”. El método 2 generaría mucha repetición, ya que tendría que hacer lo mismo en todos sus reductores. Este es el principal inconveniente. Pero es bastante popular cuando solo desea configurar initialState as {} es un patrón común.

Aquí hay una lectura de 4 minutos para una mejor comprensión: https://dev.to/lawrence_eagles/how-to-properly-set-initial-state-in-redux-78m

---

---

Utiliza Nuestro Buscador