React Native，Redux 不更新 state 上的组件，在 combineReducer 之后更改

Question

Stack Overflow Gods,

I am new to Redux and am working on pulling data from a database and using it to create an initial state object for Redux using Redux Thunk.

My reducer file structure currently looks like:

• reducers
  • index.js
  • initialData.js

My components re-renders perfectly when I have the reducer that handles these interactions within index.js:

 import {GET_INITIAL_DATA_FULFILLED, GET_INITIAL_DATA_PENDING, GET_INITIAL_DATA_REJECTED} from '../constants/action-types' const initialState = { chats: [], messages: [], user: {}, loading:true, errorMessage:'' } const reducer = (state = initialState, action) => { switch(action.type){ case GET_INITIAL_DATA_PENDING: // console.log('loading') return {...state, loading:action.payload }; case GET_INITIAL_DATA_FULFILLED: // console.log('Data recieved') return {...state, user: action.payload.user, messages:action.payload.messages, chats: action.payload.chats, loading:action.loading }; case GET_INITIAL_DATA_REJECTED: // console.log('Error getting data') return {...state, errorMessage: action.payload, loading: action.loading }; default: return state; } } export default reducer

However, when I want to decouple this from the root reducer and switch to using combineReducer, the components no longer re-renders. This is that implementation:

index.js

 import { combineReducers } from 'redux'; import initialData from './initialData' export default combineReducers({ initialData })

initialData.js

 import {GET_INITIAL_DATA_FULFILLED, GET_INITIAL_DATA_PENDING, GET_INITIAL_DATA_REJECTED} from '../constants/action-types' const initialState = { chats: [], messages: [], user: {}, loading:true, errorMessage:'' } const initialData = (state = initialState, action) => { switch(action.type){ case GET_INITIAL_DATA_PENDING: console.log('loading') return {...state, loading:action.payload }; case GET_INITIAL_DATA_FULFILLED: console.log('Data recieved') return {...state, user: action.payload.user, messages:action.payload.messages, chats: action.payload.chats, loading:action.loading }; case GET_INITIAL_DATA_REJECTED: console.log('Error getting data') return {...state, errorMessage: action.payload, loading: action.loading }; default: return {...state}; } } export default initialData

If anybody has any ideas as to why my component is not re-rendering, despite the data being received and the state being updated I would love to hear them.

Answer 1

Figured it out. combineReducer creates a new property on the state object. So the component was just rendering an undefined state as I wasn't checking for that new property.