You can call getState() over a store to get the list of reducers and the current state inside the reducers. Import the store into auditLoading (use store to get values. Don’t mutate the store) store.getState().auditLoading will give you the state of auditLoading reducer. This approach is similar to the callback provided by redux-thunk. In which … Read more
This is covered in the Redux FAQ at https://redux.js.org/faq/reducers#how-do-i-share-state-between-two-reducers-do-i-have-to-use-combinereducers: Many users later want to try to share data between two reducers, but find that combineReducers does not allow them to do so. There are several approaches that can be used: If a reducer needs to know data from another slice of state, the state tree … Read more
Combine slice reducers (combineReducers) The most common approach is to let each reducer manage its own property (“slice”) of the state: const combineReducers = (slices) => (state, action) => Object.keys(slices).reduce( // use for..in loop, if you prefer it (acc, prop) => ({ …acc, [prop]: slices[prop](acc[prop], action), }), state ); Example: import a from “./Reducer1”; import … Read more
Your import statement is incorrect. Either you use import { Foo } from ‘bar’ together with export Foo, or use import Foo from ‘bar’ if you export with export default Foo. In other words, change either export default function FriendListReducer to export function FriendListReducer, or change the import statement from import { FriendListReducer } to … Read more
The difference is: combineReducers creates nested state reduceReducers creates flat state Consider following reducers. There are no action types to make things simpler: // this reducer adds a payload to state.sum // and tracks total number of operations function reducerAdd(state, payload) { if (!state) state = { sum: 0, totalOperations: 0 } if (!payload) return … Read more
Formik doesnot support fileupload by default, But you can try the following <input id=”file” name=”file” type=”file” onChange={(event) => { setFieldValue(“file”, event.currentTarget.files[0]); }} /> Here “file” represents the key that you are using for holding the file And on submit you can get the filename, size etc for the file by using onSubmit={(values) => { console.log({ … Read more
I believe this is because the type for [] is inferred to be never[], which is the type for an array that MUST be empty. You can use a type cast to address this: [‘a’, ‘b’, ‘c’].reduce((accumulator, value) => accumulator.concat(value), [] as string[]); Normally this wouldn’t be much of a problem since TypeScript does a … Read more
React is a UI framework that takes care of updating the UI in response to the “source of truth” that is usually described as a state “owned” by some component. Thinking in React describes the React state ownership concept very well, and I strongly suggest you go through it. This state ownership model works well … Read more
Starting another dispatch before your reducer is finished is an anti-pattern, because the state you received at the beginning of your reducer will not be the current application state anymore when your reducer finishes. But scheduling another dispatch from within a reducer is NOT an anti-pattern. In fact, that is what the Elm language does, … Read more