Данные меняются во всех Reducers сразу, но не должно | Redux | React
Всем привет. Появилась странная проблема и не знаю, что делать. Есть два редюсера, которые должны взаимодействовать. В treeRed... хранятся объекты, а в propRed... свойства. Странность в том, что, если я меняю данные в одном из редюсеров, во втором они тоже меняются, причем на те же самые.
Например: в tree есть items: [], а в props есть properts: {}. Если я меняю properts, то каким-то образом items тоже становится {}!
propertiesReducer
const initialPropsState: IPropsState = {
nodeProperties: {
events: [],
style: []
},
loading: true
};
export const propertiesReducer = (state = initialPropsState, action: IPropsAction) : IPropsState => {
switch (action.type) {
case PropsActionsTypes.GET_PROPS:
return {
...state,
loading: true,
nodeProperties: {}
};
case PropsActionsTypes.GET_PROPS_ERROR:
return {
...state,
loading: false,
error: true,
nodeProperties: {}
};
case PropsActionsTypes.GET_PROPS_SUCCESS:
console.log(action);
return {
...state,
loading: false,
nodeProperties: action.payload
};
default:
return state
}
};
treeReducer
const initialTreeState: ITreeState = {
nodeList: []
};
export const treeReducer = (state = initialTreeState, action: ITreeAction) : ITreeState => {
switch (action.type) {
case TreeActionsTypes.GET_ALL:
return {
...state,
loading: true,
nodeList: []
};
case TreeActionsTypes.GET_ALL_ERROR:
return {
...state,
loading: false,
error: true,
nodeList: []
};
case TreeActionsTypes.GET_ALL_SUCCESS:
return {
...state,
loading: false,
nodeList: action.payload
};
default:
return state
}
};
RootState
export const rootReducer = combineReducers({
tree: treeReducer,
properties: propertiesReducer
});
export type RootState = ReturnType<typeof rootReducer>;
Функция изменения стейта
export const loadProperties = (value: CheckboxProps) => {
return async (dispatch: Dispatch<IPropsAction>) => {
try {
dispatch({type: PropsActionsTypes.GET_PROPS, loading: true});
const target = document.querySelector(`[data-id="${value.value}"]`);
if(target !== null) dispatch({type: PropsActionsTypes.GET_PROPS_SUCCESS, payload: Object.assign($(target).prop('props'), {data: value}), loading: false});
else dispatch({type: PropsActionsTypes.GET_PROPS_ERROR, loading: false, error: true});
} catch (e) {
dispatch({type: PropsActionsTypes.GET_PROPS_ERROR, loading: false, error: true});
}
};
};