score:0
i suggest breaking your reducer up into smaller functions.
below are four functions, each in turn deals with a smaller part of the state. (though in each case the first parameter is called state, it's different every time). the action though, is always the same.
i haven't checked this code for correctness, but i hope you get the idea.
function reducertop(state, action) {
switch (action.type) {
case set_val:
return object.assign({}, state, {
[action.toplevel]: reducernext(state[action.toplevel], action);
});
}
return state;
}
function reducernext(state, action) {
switch (action.type) {
case set_val:
return object.assign({}, state, {
[action.nextlevel]: reducerarray(state[action.nextlevel], action);
});
}
return state;
}
function reducerarray(state, action) {
switch (action.type) {
case set_val:
const index = state.findindex((item) => item.id === action.id);
if (index > -1) {
return [
...state.slice(0, index),
reducerfinal(state[index], action),
...state.slice(index + 1)
];
}
}
return state;
}
function reducerfinal(state, action) {
switch (action.type) {
case set_val:
return object.assign({}, state, {
value: action.value
});
}
return state;
}
score:0
i think it is a problem of redux itself -- it is just too low-level, and some things (like nested updates, for instance), just should be easier. also, i believe that there is no problems to put all business logic into action creators, and inside reducers just update our state (and to perform nested updates, if needed).
another unnecessary thing, from my point of view -- constants. we usually have some object with all redux entities (for instance, reducers), and i think it should be enough to figure out all needed constants.
with this thoughts, i wrote a library redux-tiles, which does exactly that -- based on given type, it creates constants, handles async functions, and creates reducers for you. so, typical api request will look like the following:
import { createtile } from 'redux-tiles';
const requesttile = createtile({
type: ['api', 'request'],
fn: ({ api, params }) => api.get('/items', params),
});
it will create all constants, a reducer, and also handle failure, success and loading states. you can take a look at the full hn api example with redux-tiles here. you might find there nesting, which will update everything automatically, you just need to return an array of values to nest.
Source: stackoverflow.com
Related Query
- How to minimize reducers boilerplate when using redux with a POJO state?
- How to reset state of Redux Store when using configureStore from @reduxjs/toolkit?
- How to compose redux reducers with dependent state
- How to clean up redux state with redux thunk when unmounting component before finishing fetch in useEffect?
- How to dispatch action when a state changes in redux toolkit without using useEffect?
- How to setup a generic interface for the state when using React useReducer with typescript
- How do i prevent circular type reference in typescript with redux and connect when using mapState function?
- When using React / Redux, how is dispatching an action that merely changes the Redux state vs actually doing some task?
- How to access App components with Jest when using Redux container?
- How do I avoid infinite loop when using Redux state in useEffect dependency array?
- How to update redux state using onChange with React Redux
- How can I refresh datatable when I delete row from datatable with ReactJS without using Redux or Context?
- How to refactor an if else if with previous state when using useState Hook?
- How to set state with spread operators, when using variables for keys?
- Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux
- How to test if a component is rendered with the right props when using react-testing-library?
- How to handle local state when using relay?
- Prevent react component from rendering twice when using redux with componentWillMount
- How to avoid 'children with same key' when replacing state in ReactJs component
- Is there any way to see names of 'fields' in React multiple state with React DevTools when using 'useState' hooks
- How to connect state to props with mobx.js @observer when use ES6 class?
- How to access state when component unmount with React Hooks?
- How do I use local state along with redux store state in the same react component?
- Redux; accessing other parts of the state when using composed reducers via combineReducers
- How to set initial state with using ES6 class in React?
- How to organize state with redux and react-router?
- How can I access state of another slice in redux with redux-toolkit?
- How do I call setState with the previous state plus an additional value in a redux connected controlled component?
- React Redux - How to dispatch an action on componentDidMount when using mapDispatchToProps in a connected component
- how and when to call a react component methods after state change from redux
More Query from same tag
- React js and apexcharts Unhandled Rejection TypeError Cannot read property 'length' of undefined
- eventListener for hashChange
- Converting HTML/JS to React where JS is loaded first and requires HTML elements
- How do I prevent double confirmation in chrome with 'onbeforeunload' events in react
- React: how to re-render component every x seconds?
- Semantic UI Dropdown component max-width in ReactJS
- Warning: Each child in a list should have a unique "key" prop. with input - react
- How to set state with React Hooks from outside an effect?
- How create universal fetcher for all requests in client and server(getInitialProps)
- Throwing a SubmissionError of redux-form causes Uncaught (in promise)
- Cancel MUI Autocomplete onChange when reason is "create-option"
- Component not updating as often as it should be on React
- Getting global config to a react hook
- React: How can common functionality be extracted out into a separate function?
- How to set css variable using react
- How to return a list according to selected item?
- Can we Schedule deployments in vercel Deploy Hooks?(Next.js)
- Disable Table pagination in material-ui Reactjs
- Detect redux store changes
- React-mde WYSIWYG Editor Absolute Links
- How to pass parameter to function inside react component..?
- Does javascript keep a reference to a variable found in a array?
- Clearing cookie after sendbeacon on window.unload event in chrome
- Touchable presses not firing in absolute positioned container with zIndex (for a dropdown)
- Why can't I get the DOMNode's style (scrollHeight) in the React componentDidMount?
- react js getting error when i use serverside datatable
- Vue 3's equivalent to useEffect (React)
- Redux thunk: return promise from dispatched action
- how to fix bad request
- How to show random items in an array of 6 items ReactJS and React Hook and reshuffle the array