Redux Store заполняется в getInitialProps, но пуст на клиенте - PullRequest
Новая
       15

Redux Store заполняется в getInitialProps, но пуст на клиенте

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

Я использую пример шаблона Redux Thunk. Когда я отправляю действие в getInitialProps, которое заполняет мое хранилище, данные загружаются, но после отображения страницы хранилище все еще пусто. 

static async getInitialProps({ reduxStore }) {
  await reduxStore.dispatch(fetchCategories())
  const categories = reduxStore.getState().programm.categories;
  console.log('STATE!!!', categories)

  return { categories }
}

categories будет загружаться правильно, но когда я проверяю свой магазин, состояние категорий пустое.

Вот мой магазин: 

import db from '../../api/db'

// TYPES
export const actionTypes = {
    FETCH_PROGRAMMS: 'FETCH_PROGRAMMS',
    FETCH_CATEGORIES: 'FETCH_CATEGORIES'
}

// ACTIONS
export const fetchCategories = () => async dispatch => {

    const categories = await db.fetchCategories();
    console.log('loaded Cate', categories)

    return dispatch({
        type: actionTypes.FETCH_CATEGORIES,
        payload: categories
    })

}


// REDUCERS
const initialState = {
    programms: [],
    categories: []
}

export const programmReducers = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.FETCH_PROGRAMMS:
            return Object.assign({}, state, {
                programms: action.payload
            })
        case actionTypes.FETCH_CATEGORIES:
            console.log('Payload!', action);
            return Object.assign({}, state, {
                categories: action.payload
            })
        default:
            return state
    }
}

Как сделать так, чтобы загруженное на сервер состояние избыточности (в getInitialProps) было перенесено на клиент?

Ответы [ 2 ]

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

После нескольких часов поиска решения кажется, что я нашел свою проблему. Кажется, мне нужно передать initialState при создании магазина. Так что вместо этого: 

export function initializeStore() {
    return createStore(
        rootReducers,
        composeWithDevTools(applyMiddleware(...middleware))
    )
}

Я делаю это, и теперь это работает 

const exampleInitialState = {}

export function initializeStore(initialState = exampleInitialState) {
    return createStore(
        rootReducers,
        initialState,
        composeWithDevTools(applyMiddleware(...middleware))
    )
}
0 голосов
/ 22 апреля 2019

Если вы сделаете это: 

return { categories }

в getInitialProps, categories должно быть доступно в компоненте props на стороне клиента.

Оно должно быть доступно в Redux какну, это может вызвать проблему: 

return Object.assign({}, state, {
  categories: action.payload
})

Посмотрите на это Object.assign , функция принимает только 2 параметра.

Мой обычный способ сделать это: 

return {
  ...state,
  categories: action.payload,
};
...