Как правильно сделать initialState в redux?

Question

[mr_drinkens89]

Всем доброго времени суток.
В своем проекте я использую Redux, и метод combineReducers.
Абстрактно, мой стор:

{
 oneListOfObjects:[],
 twoListOfObjects:[],
 threeListOfObjects:[],
}

Как правильно сделать "предзагрузку" данных в initialState? То есть чтобы на момент загрузки, мы имели бы такой вид стор:

{
 oneListOfObjects:[объект1,обьект2],
 twoListOfObjects:[объект3,обьект4],
 threeListOfObjects:[объект5,обьект6],
}

Заранее благодарю.

Answer 1

[Антон Мудренок]

Вы когда создаете reducer, можете задать любой initialState. В доке пример:

import { VisibilityFilters } from './actions'

const initialState = {
  visibilityFilter: VisibilityFilters.SHOW_ALL,
  todos: []
}

function todoApp(state, action) {
  if (typeof state === 'undefined') {
    return initialState
  }

  // For now, don't handle any actions
  // and just return the state given to us.
  return state
}

Тут вместо пустого массива в вашем случае будет заполненный.

Comments

[mr_drinkens89]

Благодарю.
Не совсем только понимаю)
у меня три редьюсера, которые я выношу в combine.
Как я понимаю, каждый редьюсер в combine создает именованный объект.
То есть надо создать отдельный initialReducer, где через АПИ подгрузить данные и заполнить store?

[davidnum95]

Можно даже так:

function todoApp(state = initialState, action) {
  return state;
}

[Антон Мудренок]

mr_drinkens89: в каждом редюсере вы можете прописать initialState.
Можете в оф примерах посмотреть как они делают: https://github.com/reactjs/redux/tree/master/examp...

[Антон Мудренок]

davidnum95: да, вообще так только и надо делать

[mr_drinkens89]

Антон Мудренок: получается, что initialState (предзагрузка данными) будет не в связке с редакс? то есть это тупо аяксовый запрос?
Как создать initialData я понял.
То есть, суть какая: я предварительно записываю так:

const initialData = {
  boards:[],
  lists:[],
  tasks:[]
}

и вставляю это в createStore - ОК.
далее, наше приложение "грузится", и нам надо этот объект заполнить.
Если идти через схему: действие-редьюсер-изменение стора, то, ничего не выйдет?
Вот мой индекс-редьюсер:

export default combineReducers({
	preload,
	boards :boards,
	lists  :lists,
	tasks  :tasks
})

preload - типа как делает предзагрузку.
но, если я сделаю эту предзагрузку в preload, то и объекты будут именно в нем?
Прошу прощения, если объясняю как-то не так)
Можно ли какой-то банальный пример?

Сейчас выходит так:
(стейт из девтулс):

{
preload:{boards:[object,object,],lists:[object,object,]tasks:[object,object,]},
boards:[],
lists:[],
tasks:[]
}

[Антон Мудренок]

mr_drinkens89: если данные грузятся, то в initialState вы оставляете пустые массивы, пишете action в стиле getAllProducts() в этом примере (для этого вам нужен redux-thunk) и вызываете dispatch этого action перед главным рендером апликухи как тут

[mr_drinkens89]

Антон Мудренок: Благодарю)
redux-thunk установлен, да. еще юзаю axios для упрощения написания запросов.
Видимо, вот это store.dispatch(getAllProducts())
и будет решением). Так как сейчас combineReducers делает уже именнованные объекты (ключ - название редьюсера).
То есть сейчас я при вызове метода, делаю запрос и ответ уходит в этот именнованный редьюсер preload.
Думал, уж убирать этот combineReducer, и использовать один общий - тогда проблема бы решилась. Но, думаю, это не лучшее решение и не выходи из ситуации.

[Антон Мудренок]

mr_drinkens89: если у вас идет запрос то да, лучше через dispatch без сюрпризов. Если вы заранее знаете данные, то при создании store есть параметр preloadedState: redux.js.org/docs/api/createStore.html

[mr_drinkens89]

Антон Мудренок: все равно не то что-то выходит, прелоад заполняется не в том месте (скрин)
Быть может, все-таки уйти от combineReducers и использовать один?
Либо, заюзать https://www.npmjs.com/package/redux-async-initial-state

[Антон Мудренок]

mr_drinkens89: сложно сказать, надо в код смотреть. Вы или в редюсерах что-то не то возвращаете, или в preloadedState объект не по схеме combineReducers передаете. Либо что-то экспортировали неправильно. В первой функции редюсера ставьте debugger; и смотре что там в store прилетело.

[mr_drinkens89]

Вот редюьсер, в котором я обрабатываю ответ:
FETCH_ALL - получение начальных значений с сервера.

export default function lists(state = {}, action){
  
  if (action.type === 'FETCH_ALL') {
    return action.data
  }
  if (action.type === 'GET_LISTS') {
    return action.data
  }

  if (action.type === 'INSERT_LIST') {
    return [
      ...state,action.data
    ];
  }

  if (action.type === 'CHANGE_LIST') {
    return state.filter(element => element.is_delete == false )
  }

	return state;
}

А ответ с сервера приходит в виде:
{
boards:[объект1,объект2],
lists:[объект1,объект2],
tasks:[объект1,объект2],
}

[Антон Мудренок]

mr_drinkens89: он у вас минимум неправильный тем, что может вернуть или объект или массив.

[mr_drinkens89]

Антон Мудренок: да, это ок.
Я не пойму, почему ответ уходит не в "глобальный вид стейта", а заменяет какую-то его часть?
Понимаю, что каждый редьюсер разбивает стейт и берет свою часть для обработки.
Но, таким образом, если мне с сервера приходит все (boards,lists,tasks), как мне разово обновить стейт (глобально)?

[Антон Мудренок]

mr_drinkens89: Если у вас схема строгая, то можно сделать. Если ваш редюсер при пустом state возвращает
{
boards:[],
lists:[],
tasks:[],
}
строго по названиям и объектам. Если что-то не будет совпадать — хрен его знает как сработает) Или вы например не распарcили json. Надо дебажить и смотреть, там никакой магии нет.

[mr_drinkens89]

Антон Мудренок: да, схема всегда будет такая)
Суть всего: приложение "ворочает" доски, у досок есть списки, а у списков - задачи)
На сервере я настроил, что при первоначальном запуске аппа - выдает нам JSON, который содержит в себе:

boards:[объекты-доски] ,
lists:[объекты-списки],
tasks:[объекты-таски]

Как я понимаю, суть редакса в том, что мы всегда имеем одно текущее состояние (по сути, json). Дак вот, я хочу, чтобы в момент запуска приложения все текущие объекты для данного юзера (вообще все), подгрузились с сервера и хранились в STORE.
Ну а уже далее, например при клике на определенную доску, мне уже не надо будет делать запрос, а я с помощью filter выберу нужные мне листы и задачи.
Надо, чтобы при createStore (например), мы уже передали бы приложению наш начальный json - который и придет с сервера.

Не пойму, что не так идет) Либо, можно, конечно, сделать так: добавить редьюсер, назвать его как-нить "root", и он и будет возвращать нам текущее состояние.
Но, как я понимаю, оно будет в виде:

root:
  boards:[],
  lists:[],
  tasks:[],

то есть имеем еще один уровень вложенности, так как каждый редьюсер призван обрабатывать только свою, определенную ветку из всего стора)

[Антон Мудренок]

mr_drinkens89: короче вам надо оставить редюсеры в покое, сделать action для изменения boards, сделать action для изменения lists, сделать action для изменения tasks, и сделать action в виде функции, которая поймает ваш json:

export const getInitialState = () => dispatch => {
  fetch(myRequest)
  .then(response => response.json())
  .then(data => { 
    dispatch(changeBoars(data.boards));
    dispatch(changeLists(data.lists));
    dispatch(changeTasks(data.tasks));
  })
}

И перед render() в App сделать store.dispatch(getInitialState())

[mr_drinkens89]

Антон Мудренок: Супер)
Немного упростил для себя.
в componentWillMount я вызываю dispatch и передаю action. Далее, в action делаю запрос к серверу и тащу эти первоначальные данные.
Ну и в каждом редьюсере (boards ,lists, tasks) "слушаю" FETCH_ALL. Ну и выдаю нужную ветку:

if (action.type === 'FETCH_ALL') {
    return action.data.boards;
  }
if (action.type === 'FETCH_ALL') {
    return action.data.lists
  }
if (action.type === 'FETCH_ALL') {
    return action.data.tasks;
  }

сейчас стейт заполнен данными с сервера.
Единственное, они подаются не прям на вход, а когда уже рут-компонент грузится.

[Антон Мудренок]

mr_drinkens89: товарищ, вам надо бы js подучить перед тем как на react писать)
После первого return второй и третий уже не сработают)

[mr_drinkens89]

Антон Мудренок: необходимо как-то упростить все это дело, и не выходить за рамки редакс.
В том пример выше, что вы указали, как я понимаю, все равно изменение стора идет через редьюсер?
Может быть я не так описал, но стор сейчас заполнился данными с сервера по той схеме, что я описал.
Мы пишем все эти "FETCH_ALL" в разных редьюсерах, и каждый обрабатывает их по своему. В чем здесь не так?) (я скопировал код из разных редьюсеров)

[mr_drinkens89]

Антон Мудренок: понятно, что если это будет описано в одном редьюсере - то да, после первого return обработка прекратится.
Но, мы описываем все это дело в разных редьюсерах и каждый "забирает" только свою ветку и выплевывает в стор только свою часть))

[Антон Мудренок]

mr_drinkens89: ага, ну ок тогда, главное чтобы работало как вам надо) Наверно с 1 dispatch получше, хотя я лично бы постеснялся писать на одно и то же действие "добавление" 2 разных кейса.

[mr_drinkens89]

Антон Мудренок: Благодарю за помощь, разобрался теперь по этому моменту)

Answer 2

[KnightForce]

Чувак выше прав, но можешь оставить так:

{
 oneListOfObjects:[],
 twoListOfObjects:[],
 threeListOfObjects:[],
}

А потом, например в constructor App (или что там у тебя оборачивает Provider) вызови запрос к серверу. Тут уж как хочешь. Например, если нужно переписать на React, а сервер не переписывать.

initState - это начальный store ля твоего проекта.
Ты можешь использовать один редьюсер и в нем обращаться к определенным полям store, но чтобы было проще - их расщепляют. В итоге каждый reducer работает со своим полем из store.

Comments

[mr_drinkens89]

с сервера мне приходит сразу "все". (сперва делаю предазгрузку объектов, а после - уже ворочаю их на клиенте- не знаю, правда, насколько это верный подход).
я создал initialData:

const initialData = {
  boards:[],
  lists:[],
  tasks:[]
}

const store = createStore(reducer, initialData, composeWithDevTools(applyMiddleware(thunk)));

далее, я имею комбинацию редьюсеров вида:

export default combineReducers({
	boards :boards,
	lists  :lists,
	tasks  :tasks
})

Можно ли (хотя б кратко) описать, каким образом сделать "предзагрузку"?
Ведь все должно идти через редьюсер, как я понимаю:
componentWillMount - action - начальный редьюсер, который заполнил начальный store.

спасибо

[KnightForce]

Из конструктора или componentDidMount диспатч асинхронный экшн, либо используй Redux Saga.

В нем и делай запросы.