堆栈溢出神,
我是Redux的新手,正在从数据库中提取数据,并使用它为Redux创建一个初始状态对象。
我的reducer文件结构目前看起来像:
- 减速器
- index.js
- initialData.js
当我在index.js:中拥有处理这些交互的reducer时,我的组件会完美地重新渲染
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
但是,当我想将其与根还原器解耦并切换到使用combineRemotor时,组件将不再重新渲染。这就是实现:
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
如果有人知道为什么我的组件没有重新渲染,尽管数据正在接收和状态正在更新,我很乐意听到他们的意见。
想明白了。combineReducer在状态对象上创建一个新特性。所以组件只是呈现一个未定义的状态,因为我没有检查那个新属性。