React app doesn't update components after reducing new state. After first render, no matter what actions i do, there is no updates in react components.
I tried to find some state mutation in reducers, but there are none. I have no idea what is a problem.
Here is repo: https://github.com/ithrasil/rainbeat/tree/bug
I would appreciate any help
one of reducers:
export default function(
state={
received: false,
status: false,
primaryList: [],
secondaryList: [],
query: ""
},
action) {
switch(action.type) {
case "RECEIVE_STATUS":
state.received = action.payload;
break;
case "SEARCH_STATUS":
state.status = action.payload;
break;
case "PRIMARY_LIST_UPDATE":
state.primaryList = action.payload;
break;
case "SECONDARY_LIST_UPDATE":
state.secondaryList = action.payload;
break;
case "QUERY_UPDATE":
state.query = action.payload;
localStorage.setItem('query', action.payload);
break;
}
return state;
}
One of containers
https://github.com/ithrasil/rainbeat/blob/bug/src/containers/left/search.jsx
You are mutating the state. That is why your components are not rendering
export default function(state={ id: 0 }, action) {
var newState;
switch(action.type) {
case "CHANGE_CARD":
newState={...state, id: action.payload}
break;
}
return newState;
}
Related
Hi currently i am creating a project using hooks with redux.
while every time i trigger a new request ...state was not maintaining the previous data.so please help upon this .
const initialState = {
isLoaded: false,
followData:{},
FollowerCountData:{}
}
export default function followReducer(state = initialState, action) {
switch (action.type) {
case allActions.FETCH_FOLLOW_DATA:
return action;
case allActions.RECIEVE_FOLLOW_DATA:
return {
...state,
followData: action.payload,
};
case allActions.FETCH_FOLLOWER_COUNT:
return action;
case allActions.RECIEVE_FOLLOWER_COUNT:
return {
...state,
FollowerCountData: action.payload,
};
default: return state;
}
}
I've been working with redux for the last couple weeks and was incorporating it into my projects when I ran into this wall. Pretty common reducer for modals being rendered so i can animate them before unmounting them.
const initialState = {
isModalOpen: false,
test: false
}
export default function(state = initialState, action) {
switch (action.type) {
case "modalInteraction":
return {
isModalOpen: action.payload
};
case "testModalInteraction":
return {
test: action.payload
};
default:
return state;
};
}
Sadly, the test property is still returning as undefined despite the fact that the other initial state in the same reducer can be called without a problem. I even removed all the testModalInteraction dispatches in the case that that somehow upset the datatype. I just can't spot the difference that keeps returning undefined.
When you return the new state, make sure to spread the initial state (...state) and then change whatever values you need to change.
const initialState = {
isModalOpen: false,
test: false
}
export default function(state = initialState, action) {
switch (action.type) {
case "modalInteraction":
return {
...state,
isModalOpen: action.payload
};
case "testModalInteraction":
return {
...state,
test: action.payload
};
default:
return state;
};
}
If it is still undefined, make sure the payloads are defined for both actions.
For example, your modalInteraction action could look like
export const modalInteraction = (bool) => ({
type: "modalInteraction",
payload: bool
})
P.S., you can destructure the action object. This allows you to use "type" instead of "action.type" and "payload" instead of "action.payload".
const initialState = {
isModalOpen: false,
test: false
}
export default function(state = initialState, action) {
const {type, payload} = action;
switch (type) {
case "modalInteraction":
return {
...state,
isModalOpen: payload
};
case "testModalInteraction":
return {
...state,
test: payload
};
default:
return state;
};
}
My Todo code accepts new todo from users and update the Redux store. There seems to be a problem with my reducer function
const initialState = {
tasks: ['notodo'],
completedTasks: ['nothing']
}
const todoState = (state = initialState, action) => {
switch(action.type) {
case 'ADDTODO':
return {
...state,
tasks: [...tasks, action.payload]
};
default:
return state;
}
}
case 'ADDTODO':
return {
...state,
tasks: [...tasks, action.payload] // Here ...tasks is undefined
};
It should be [...state.tasks, action.payload]
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 the following reducer below for user's submitting a rating and getting the user's ratings (your_ratings)...
When LOAD_YOURRATINGS_SUCCESS occurs, the two levels of initalState are being remove, and your_ratings is becoming the value of store.rating, when I want it to be store.rating.your_ratings.
What am I doing wrong below? Thanks
import * as types from '../actions/actionTypes';
const initialState = {
rating: {},
your_ratings: {}
}
export default function ratingReducer(state = initialState, action) {
switch (action.type) {
case types.CREATE_RATING_SUCCESS:
return action.rating
case types.LOAD_YOURRATINGS_SUCCESS:
return action.your_ratings
default:
return state;
}
}
You need to update your state and not overwrite it, you can do it with the help of spread operator like
export default function ratingReducer(state = initialState, action) {
switch (action.type) {
case types.CREATE_RATING_SUCCESS:
return {...state, rating: action.rating}
case types.LOAD_YOURRATINGS_SUCCESS:
return {...state, your_ratings: action.your_ratings}
default:
return state;
}
}