reactjs - form - React-Redux: Combinando reductores: llaves inesperadas

react js

Question

Mi aplicación funciona bien antes de comenzar a combinar mis reductores Redux. Pero cuando combino, las claves initialState y reducer se mezclan.

function flash(state = [], action) {
  switch (action.type) {
  case FLASH_MESSAGE_UPDATED:
    return _.extend({}, state, { flash: action.flash })
  default:
    return state
  }
}

function events(state = [], action) {
  switch (action.type) {
  case EVENTS_UPDATED:
    return _.extend({}, state, { events: action.pathway_events })
  default:
    return state
  }
}

export default combineReducers({
  events,
  flash
})

Esto da como resultado una funcionalidad rota y un error de consola de:

Unexpected keys "one", "two" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "events", "flash". Unexpected keys will be ignored.

Mi estado inicial se transfiere con la ayuda de redux-thunk.

import { createStore, applyMiddleware } from ''redux'';
import thunk from ''redux-thunk'';
import reducer from ''../../reducers/event''

let initialState = {
  one: globalData.one,
  two: globalData.two,
  events: globalData.events,
  flash: globalData.flash
}
let createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
let reduxStore = createStoreWithMiddleware(reducer, initialState);

React.render(
  <Provider store={reduxStore}>
    <EventListContainer />
  </Provider>,
  $(''.events'')[0]
)

¿Cómo puedo combinar reductores correctamente?

Answer 1

tl; dr

Si haces SSR, ¡recompila tu paquete del lado del servidor!

Explicación

Este mensaje de error puede aparecer cuando realiza la representación del lado del servidor (SSR), cambia algo en el código del reductor y solo lo recompila / HMR en el lado del cliente .

Cuando haces SSR, tienes que serializar tu tienda de Redux a una variable global (como la window.__INITIAL_STATE__ ), así que cuando inicializas el lado del cliente, createStore puede leer eso y construir el mismo estado de Redux.

Si no recompila su código modificado para el lado del servidor, el estado inicial del servidor aún puede contener un estado con las claves antiguas (de los reductores antiguos) mientras que el lado del cliente tiene el nuevo estado (de los reductores nuevos / modificados) )

Técnicamente, esto no romperá la forma en que funciona el lado del cliente porque Redux ignora las claves inesperadas, es solo una advertencia útil (no es realmente un error) que recuerda que recompila el paquete del lado del servidor. Sin embargo, esto puede ser una preocupación en la producción o cuando se hydration rendimiento de la hydration porque el estado diferente puede dar como resultado un DOM diferente. Por supuesto, este error no debería ocurrir en la producción, ya que su proceso de implementación debería crear automáticamente tanto el paquete del lado del cliente como el del servidor.

Answer 2

Creo que simplemente necesita agregar reductores para las teclas adicionales, por ejemplo

function one(state = {}, action) {
  switch (action.type) {
  case ONE_UPDATED:
    return action.one
  default:
    return state
  }
}

De los documentos :

Si produjo un reductor con CombinedReducers, este debe ser un objeto simple con la misma forma que las teclas que se le pasan. De lo contrario, puedes pasar cualquier cosa que tu reductor pueda entender.

Si no necesita manejar ninguna acción relacionada con one o two , simplemente instálelos inicialmente, esto podría ser tan simple como

export default combineReducers({
  events,
  flash,
  one: (state = {}) => state,
  two: (state = {}) => state
})