I want to update the state of activitiesData when ACTIVITIES_SEND_SUCCESS is executed by appending the new data to the end of the object activitiesData.
ActivitiesReducer.js
import {
ACTIVITIES_FETCH_SUCCESS,
ACTIVITIES_SEND_SUCCESS,
SUBACTIVITY_SEND_SUCCESS
} from '../actions/types';
const INITIAL_STATE = { activitiesData: {}, activityCreated: {}, listActivity: {} };
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case ACTIVITIES_FETCH_SUCCESS:
return { ...state, activitiesData: action.payload };
case ACTIVITIES_SEND_SUCCESS:
return { ...state, activityCreated: action.payload };
case SUBACTIVITY_SEND_SUCCESS:
return { ...state, listActivity: action.payload };
default:
return state;
}
};
You can append the data using spread operator syntax like
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case ACTIVITIES_FETCH_SUCCESS:
return { ...state, activitiesData: action.payload };
case ACTIVITIES_SEND_SUCCESS:
return { ...state, activityCreated: action.payload, activitiesData: {...state.activitesData, ...action.payload } };
case SUBACTIVITY_SEND_SUCCESS:
return { ...state, listActivity: action.payload};
default:
return state;
}
};
Related
Any idea why my reducer is acting on action.type based on its position in the switch statement?
I spent a lot of time debugging and then realized it was actually the position in the switch statement that is causing the problem.
import {
FETCH_PRODUCTS_BEGIN,
FETCH_PRODUCTS_SUCCESS,
FETCH_PRODUCTS_ERROR,
CREATE_PRODUCT,
UPDATE_PRODUCT,
DELETE_PRODUCT,
} from "./inventoryTypes";
const initialState = {
loading: false,
products: [],
error: "",
};
const userInventoryReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_PRODUCTS_BEGIN:
return {
...state,
loading: true,
};
case FETCH_PRODUCTS_SUCCESS:
return {
loading: false,
products: action.payload,
error: "",
};
case FETCH_PRODUCTS_ERROR:
return {
loading: false,
products: [],
error: action.payload,
};
case DELETE_PRODUCT:
return {
...state,
products: state.products.filter(
(product) => product._id !== action.payload
),
};
case CREATE_PRODUCT:
console.log("your calling create!");
return {...state}
case UPDATE_PRODUCT:
console.log("calling update");
return { ...state };
default:
return state;
}
};
Check the values inside your "./inventoryTypes" file' maybe there are duplications of the same actions.
This is resolved. The value for my CREATE_PRODUCT, UPDATE_PRODUCT inside "./inventoryTypes" is the same!
How to merge the existing state with the new state in react native using redux?"
i tried these
const Initial_State = { images: [] };
export default (state = Initial_State, action) => {
switch (action.type) {
case 'ImagesFetch':
return {...state, images: action.payload};
default:
return state;
}
}
these two are returning the new state but not showing the previous state
const Initial_State = { images: [] };
export default (state = Initial_State, action) => {
switch (action.type) {
case 'ImagesFetch':
return {...state, images: [...action.payload]};
default:
return state;
}
}
const Initial_State = { images: [] };
export default (state = Initial_State, action) => {
switch (action.type) {
case 'ImagesFetch':
return [...state, ...action.payload.images];
default:
return state;
}
}
and the one is throwing and error, none of the above worked
try this:
const Initial_State = { images: [] };
export default (state = Initial_State, action) => {
switch (action.type) {
case 'ImagesFetch':
return {
images: [...state.images, action.payload]
};
default:
return state;
}
}
Or better to safe if in the future you add to state other properties:
const Initial_State = { images: [] };
export default (state = Initial_State, action) => {
switch (action.type) {
case 'ImagesFetch':
return {
...state,
images: [...state.images, action.payload]
};
default:
return state;
}
}
So here is the problem, I need some modifications to always to be done after each and every action except one. So in order to achieve this I have done the following. Is there a better way to achieve this?
export const reducer = (state, action) => {
switch (action.type) {
case 'AddCheckboxJson': {
return ReducerWrapper({ ...state,objCheckBox:action.payload });
}
case 'insertAt':return ReducerWrapper({
...state,objCheckBox:{...state.objCheckBox,
Values:insertAt(action.payload.index,action.payload.entry,"iDisplayOrder",state.objCheckBox)
}
})
case 'INSERT_ABOVE':
return ReducerWrapper({
...state, objRadio: {
...state.objRadio,
Values: action.payload
}
})
case 'INSERT_BELOVE':
return ReducerWrapper({
...state, objRadio: {
...state.objRadio,
Values: action.payload
}
}),
case 'REPLACE':return { ...action.payload }
default: {
return state;
}
}
};
Here the function ReducerWrapper does the common modification
export const ReducerWrapper = State => {
return {...State,
//modifications done here
}
}
This is really a lot simpler than it probably seems, just return for the two scenarios you don't want to apply the additional state i.e.
export const reducer = (state, action) => {
switch (action.type) {
case 'AddCheckboxJson': {
state = {
...state,
objCheckBox: action.payload
};
}
case 'insertAt': {
state = {
...state,
objCheckBox:{
...state.objCheckBox,
Values: insertAt(
action.payload.index,
action.payload.entry,
"iDisplayOrder",
state.objCheckBox
)
}
}
}
case 'INSERT_ABOVE': {
state = {
...state,
objRadio: {
...state.objRadio,
Values: action.payload
}
}
}
// presumably this should be INSERT_BELOW?
case 'INSERT_BELOVE': {
state = {
...state,
objRadio: {
...state.objRadio,
Values: action.payload
}
}
},
// return the state early in both these scenarios
case 'REPLACE': return { ...action.payload }
default: return state;
}
// run additional state change
return ReducerWrapper(state);
};
I'm building a quite simple app using Redux and my reducers all look alike. It works, technically, but that's a lot of code duplication.
// The employees reducer
export default (state = initialState, action) => {
switch (action.type) {
case EMPLOYEES_REQUEST:
return [ ...state, { isFetching: true } ]
case EMPLOYEES_SUCCESS:
// DEBUG
console.log('Dispatching employees');
console.log(action.response);
// END DEBUG
// Return employees directly in the employees state
return { ...state, list: JSON.parse(action.response) };
case EMPLOYEES_FAILURE:
return [ ...state, { isFetching: false } ]
default:
return state
}
}
And
// The services reducer
export default (state = initialState, action) => {
switch (action.type) {
case SERVICES_REQUEST:
return [ ...state, { isFetching: true } ]
case SERVICES_SUCCESS:
// DEBUG
console.log('Dispatching services');
console.log(action.response);
// END DEBUG
// Return services directly in the services state
return { ...state, list: JSON.parse(action.response) };
case SERVICES_FAILURE:
return [ ...state, { isFetching: false } ]
default:
return state
}
}
Is there something I can to to use a generic reducer with different actions?
Thanks!
Reducer is just a function. You could always use a higher order function to make it.
const makeListReducer = (initial, prefix) => (state = initial, action) => {
switch(action.type) {
case `${prefix}_REQUEST`: return {...state, isFetching: true}
case `${prefix}_SUCCESS`: return {...state, isFetching: false, list: JSON.parse(action.response)}
case `${prefix}_FAILURE`: return {...state, isFetching: false, /*etc*/}
}
return state
}
// The employees reducer
export default makeListReducer(initialState, 'EMPLOYEES')
I have read many articles and examples, but I dont find a method to simplify a nested state. Is this possible to udpate a state without using a rest operator by property like the partial code below ?
const initialState = {
currentTag: 'fr-FR',
locales: {
components: [],
},
};
const setComponentsLocales = (state, payload) => ({
...state,
[payload.oid]: payload.locales,
});
const localesReducer = (state, action) => {
switch (action.type) {
case types.SET_COMPONENT_LOCALES:
return {
...state,
components: setComponentsLocales(state.components, action.payload),
};
default:
return state;
}
};
export default (state = initialState, action) => {
switch (action.type) {
case types.SET_LANGUAGE:
return {
...state,
currentTag: action.payload.tag,
};
default:
return {
...state,
locales: localesReducer(state.locales, action),
};
}
};