Разные способы инициализации исходного глобального состояния реагирующего редукционного магазина? - PullRequest
0 голосов
/ 20 апреля 2019

Каковы различные способы инициализации начального глобального состояния реагирующего хранилища?Я вижу два способа, которыми этот редукс мог установить начальное глобальное состояние

Допустим, у нас есть один редуктор, и весь javascript находится в одном файле.

function rootReducer(state = "Initial Reducer State!", action){
  switch(action.type) {
    case SET_TEXT:
      return "Ignore this case statement it won't run"
    default:
      return state;
  }
}

(1) Я знаю, что вы можете использовать что-то вроде createStore(rootReducer, initialState).

const store = createStore(
  rootReducer,
  initialState
)

const initialState = {
  text: "Initial Global State!"
}

(2) Однако я заметил, что некоторые репозитории устанавливают initialState для пустого объекта, но хранилище избыточных данных показывает, что глобальное состояние заполнено.Пример из этой публикации в стеке: как установить начальное состояние в редуксе

const store = createStore(
  combineReducers({
     text: rootReducer
  }),
  initialState
)

const initialState ={}

Результирующее глобальное хранилище:

(1) output {text: "Initial Global State!"}

(2) выходы {text: "Initial Reducer State!"}

Почему # 2 работает так, как работает?

Когда и где он установлен?

1 Ответ

0 голосов
/ 20 апреля 2019

[ответ приходит от того, что я играю с редуксом и получаю советы от старшего разработчика реактивного редуктора Эндрю Душейна]

Когда хранилище создается через Redux, каждый редуктор автоматически запускается один раз

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

В документации Redux, около конца файла, есть dispatch({ type: ActionTypes.INIT })

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

TLDR

Потому что в примере №2

  • магазин создан
  • combineReducers({text: rootReducer}) устанавливается
  • rootReducer выполняется, потому что каждый редуктор запускается один раз при создании магазина
  • По умолчанию возвращается значение, в данном случае "Initial Reducer state!"
  • text in ({text: rootReducer}) захватывает ответ
  • {text: "Initial Reducer State!"} сохраняется как глобальное состояние

Заключительные замечания

если вы установите initialState в хранилище, это всегда выполняется после того, как все редукторы отправляются один раз.

...