I have a product filter array which i stored in redux, initially its an empty array and i want to dispatching an object in it one by one .
The issue is i want to check if the object_id is already is in the array then i don't want to dispatch it and as well as delete that particular object in redux state.
Likewise,
if user added blue color filter so its accept but if user again added blue color filter so its shouldn't dispatch this object and also remove this object in redux.
reducer:
filterd :[]
const filterreducer = (state = initialState, action) => {
switch (action.type) {
case ADD_FILTER:
return {
...state,
filterd :[...state.filterd,action.payload]
};
default:
return state;
}
}
export default filterreducer ;
initialState ={
filterd :[]
}
const filterreducer = (state = initialState, action) => { switch (action.type) {
case ADD_FILTER:
return {
...state,
filterd :action.paylod
};
default:
return state;
}
}
export default filterreducer ;
you have to store response data in payload while dispatching that action
such as:
dispatch({
type:ADD_FILTER,
payload: response.data
)
Related
I am having a two step form in react. The first step of the form we ask some information to the user and then I add it to the state. The second step of the form I ask some more information to the user and add it to the state, so instead of appending the information that was asked on step 2 of the form, it overrides the state, so the state now only the info that was asked in the step 2 of the form. How can I add the have both the information together. When i try to ...state it gives me error as state is not iterable.
const infoReducer = (state = {}, action) => {
switch(action.type) {
case 'STEP_1':
return action.payload
case 'STEP_2':
return action.payload
default:
return state
}
}
check this out
import { ActionTypes } from "../../Constant/ActionType";
const initState = {
Auth: {},
};
const AuthReducer = (state = initState, action) => {
switch (action.type) {
case ActionTypes.AuthUser:
return {
...state,
Auth: action.payload,
};
default:
return state;
}
};
export default AuthReducer;
first, copy the current state data and add a new action payload as second parameter
case 'ADD_Data':
return {...state,action.payload}
populate my initialState with json api call from a component or from here
const initialState = {
myvalues: [] ---->here i want to populate this array
};
const reducer = (state = initialState, action) => {
const newState = { ...state };
switch (action.type) {
case "Update":
console.log(newState);
// newState.myvalues = action.key.title.value;
default:
return newState;
}
};
export default reducer;
To populate your initialState with data from an API, you can create e.g. an FETCH_INIT_DATA_ACTION, which get's dispatched right after you initialised your store.
// ...
const store = createStore(/* ... */)
store.dispatch({ type: 'FETCH_INIT_DATA_ACTION' })
// ...
whereas FETCH_INIT_DATA_ACTION triggers a redux-thunk, saga, effect or whatever you want to use.
You can do it like this:
const reducer = (state = initialState, action) => {
switch (action.type) {
case "Update":
return { ...state, myvalues: action.payload }
default:
return state;
}
};
And when you dispatch it you should put your API data in payload.
I have two dashboards which contains similar data and properties that I want to implement in redux. See below.
Dashboard 1 : {filters, widgets, custom}
Dashboard 2: {filters, widgets, custom}
I want to create my redux state like so:
{
dashboards: {
dashboard1:{
filter:{ // filter related stuff},
widgets:{ // widget related state},
custom:{ // custom state}
},
dashboard2: {
filter:{ // filter related state},
widgets:{ // widget related state},
custom:{ // custom state}
}
},
auth: {// auth related stuff},
...// other state keys
}
In order to achieve this I am trying to use combine reducers like this for dashboards
// xyz.reducer.js
combineReducers({
filters: filterReducers,
widgets: widgetReducers,
custom: CustomReducers
})
now I have created a dashboard reducer, which is called every time user navigates to a certain dashboard. I want to assign this state based on dashboardID. something like -
const dashboardReducer = (state = defaultState, action) => {
switch (action.type) {
case CREATE_DASHBOARD: {
const { payload } = action;
return {
...state,
[payload.dasboardId]: // all the combined reducer state here
};
}
default:
return state;
}
};
Can someone suggest me how can I achieve this? I am also open for suggestion if someone have a better
way of maintaing this kind of state structure.
Sure, you can do this as long as you have a way to identify all actions that are relevant to the xyz reducer and have away to identify the dashboardId.
For your example, assuming the nested reducer from xyz.reducer.js is called xyz:
import xyz from './xyz.reducer.js'; // or whatever
const dashboardReducer = (state = defaultState, action) => {
switch (action.type) {
case CREATE_DASHBOARD: {
const { payload } = action;
return {
...state,
[payload.dashboardId]: xyz(state[payload.dashboardId], action),
};
}
default:
return state;
}
};
Let's say you know all of the action types that the dashboard might need to respond to you and they all have dashboardId as a key in the payload you can simply pass all of those along.
const dashboardReducer = (state = defaultState, action) => {
switch (action.type) {
case CREATE_DASHBOARD:
case UPDATE_DASHBOARD_FILTER:
case ADD_DASHBOARD_WIDGET:
//... etc
{
const { payload } = action;
return {
...state,
[payload.dashboardId]: xyz(state[payload.dashboardId], action),
};
}
default:
return state;
}
};
This is a little brittle so you may want to do something like assume that any payload with a dashboard id should be passed on:
const dashboardReducer = (state = defaultState, action) => {
const {payload = {}} = action;
if (typeof payload.dashboardId !== 'undefined') {
return {
...state,
[payload.dashboardId]: xyz(state[payload.dashboardId], action),
};
}
return state;
};
Now you don't need to keep up the list of action types, you just need to ensure that all relevant action creators include a dashboardId in their payload.
Hey guys i am stuck in a situation in which i have to set the inital state of reducer to some value let me show you the code
First of all i have an action creater like this
export const fetchuser = () => {
return async dispatch => {
const res = await axios.get("/api/currentuser");
dispatch({
type: "fetchuser",
payload: res.data
});
};
};
which just fetches the data from api and dispatches an action to reducer
export default function(state = {}, action) {
switch (action.type) {
case "fetchuser":
return action.payload||false;
default:
return state;
}
}
now in second action creater i have to make a post request and increase the "credits" value in user database
export const handletoken = token => {
return async dispatch => {
const res = await axios.post("/api/stripe", token);
dispatch({ type: "credits", payload: res.data });
};
};
so i get the updated value here then i pass this on to the reducer
export default function(state = {}, action) {
switch (action.type) {
case "credits":
return action.payload
default:
return state;
}
}
and then combine them in reducer/index.js
export default combineReducers({
auth: authreducer,
credits:creditsreducer
});
console log of auth reducer in app.js in mapstatetoprops function gives
auth:
credits: 40
googleid: "109463598810933991924"
__v: 0
_id: "5d7fff2c4cb0604139055ce4"
so in credits reducer as u can see i have defined initial value of state as an empty object but i want to set it as the value of credits key of auth reducer, I could easily set it to array or an object hardcoding it but here i need to set its value as a value which is already in my another reducer so how can i achieve this ?
Assuming you need to wait for "fetchuser" to succeed to set credits in your creditsreducer you can handle the "fetchuser" action in your creditsreducer as well:
export default function(state = {}, action) {
switch (action.type) {
case "fetchuser":
return action.payload ? action.payload.credits : state;
case "credits":
return action.payload
default:
return state;
}
}
Always keep previous reducer state value. Otherwise no use of redux state value. like this
1.export default function(state = {}, action) {
switch (action.type) {
case "fetchuser":
let data = action.payload||false;
return {
...state,
fetchuser: data //any where you can access fetchuser data as well as previous state will not change.
}
default:
return state;
}
}
Change all the reducers like above.
I have two reducers, the first one fetches data and the second one is used to filter the data based on changes to the original data. I have read that using combineReducers is not an option.
My postReducer
import {FETCH_POST} from '../actions/types';
const initialState = {
items: [],
item: {}
};
export default function(state = initialState, action){
switch (action.type){
case FETCH_POST:
return Object.assign({}, state, {items: action.payload});
default:
return state;
}
}
My pinReducer
import {PIN_POST} from '../actions/types';
const initialState = {
items: [],
item: {}
};
export default function(state = initialState, action){
switch (action.type){
case PIN_POST:
console.log(state.items);
const item = state.items.map(value => value.data.id === action.id ?
{data: Object.assign({}, value.data, {pinned: action.val})} : value
);
//console.log(item);
return Object.assign({}, state, {items: item });
default:
return state;
}
}
Main
import {combineReducers} from 'redux';
import postReducer from './postReducer';
import pinReducer from './pinReducer';
export default combineReducers({
post: postReducer,
pin: pinReducer
});
How can I share the state between the two reducers, as state.items in the pinReducer is empty
You should not have a reducers that has state derived on the basis of other reducers. What you need in your case is a selector(more efficiently a memoizedSelector), for which you can use reselect library
My postReducer
import {FETCH_POST} from '../actions/types';
const initialState = {
items: [],
item: {}
};
export default function(state = initialState, action){
switch (action.type){
case FETCH_POST:
return Object.assign({}, state, {items: action.payload});
default:
return state;
}
}
Main
import {combineReducers} from 'redux';
import postReducer from './postReducer';
export default combineReducers({
post: postReducer,
});
and then where you want to use pinItem, you can do that in mapStateToProps
getPinItem = (state, props) => {
const item = state.items.map(value => value.data.id === action.id ?
{data: Object.assign({}, value.data, {pinned: action.val})} : value
);
return item;
}
const mapStateToProps = (state, props) => {
const pinItem = getPinItem(state, props);
return {
pinItem
}
}
Reducer does not access to store's state, nor other reducers' previous state. Only to its own previous state and dispatched action. You can think of it as a single brick in the wall of redux' state.
In your case, we have to tackle the logic and decide what is an actual state here.
Requirements:
fetch a list of posts: state is an array of posts;
pin one of these posts: state is an id of currently pinned post;
get currently pinned post: find a post in an array by pinned post id.
Solution:
1 - initial posts reducer:
const initialState = { items: [] }
const reducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_POSTS:
return { items: action.payload }
default:
return state
}
}
2 - add info about pinned post:
const initialState = { items: [], pinnedId: null }
const reducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_POSTS:
return { ...state, items: action.payload.posts }
case PIN_POST:
return { ...state, pinnedId: action.payload.id }
default:
return state
}
}
3 - get a currently pinned post:
// assuming that store is configured...
export default combineReducers({ posts: postsReducer })
// ...
// somewhere in `connect`
const mapStateToProps = (state, ownProps) => {
return {
pinnedPost: state.posts.find(post => post.id === state.posts.pinnedId),
}
}
So now we store a minimum information about a pinned post (only its id) and it is enough to get an actual pinned post.
Also, as mentioned in another answer by #shubham-khatri, you can use optimized selectors. With current shape of the state storing pinned id separately, it is even more efficient since your selector will depend on two inputs: posts array (is re-created on fetch, so shallow comparable) and pinned id (is a primitive number or string, also easy to compare).
I'd encourage you to store as minimum information in store as possible. Also, store it in simple and flat shape. Move everything that's can be calculated to selectors.