Dynadux by default calls the onChange
when the reducer, or a middleware returns a partial state.
But in some cases there is need to block the change, for instance when we dispatch intensively actions and only at the end makes sense to trigger the onChange
.
There are two ways to block a change
- inside the reducer
- on
dispatch()
call
For React Components, you can block the changes by dispatched action and payload using the Dynadux's React Provider.
Inside reducers Dynadux is offering the blockChange()
function.
For example:
const store = createStore<ITodoAppState>({
onChange,
onDispatch: (action, payload) => dispatchedActions.push({action, payload}),
initialState: {
logged: false,
todos: [],
errors: [],
},
reducers: {
[actions.LOGIN]: ({payload: logged}) => {logged},
[actions.ADD_TODO]: ({state: {todos}, payload, blockChange}) => {
const {
todo,
doNotChange = false,
}: IADD_TODO_payload = payload;
if (doNotChange) blockChange();
return {
todos: todos.concat(todo),
};
},
[actions.REMOVE_TODO]: ({state: {todos}, payload: todoId}) => {
return {
todos: todos.filter(todo => todo.id !== todoId),
};
},
},
});
In this example, we can dispatch the ADD_TODO
action intensively with payload {todo, blockChange: true}
and on last dispatch without the blockChange
property.
The onChange
will be called only once.
The 3rd argument of the dispatch is a config object that accepts the blockChange: boolean
property.
For example:
store.dispatch(action.UPDATE_METADATA, {meta}, {blockChange: true});
store.dispatch(action.LOAD_TODOS, undefined, {blockChange: true});
- FAQ Frequently asked questions
- React How to use it in react
- Examples Live examples. Examples compared to redux's implementations
- Typescript Tips for Typescript implementations
- Terminology Terminology of dynadux, (is small!)
- History, Undo/Redo Middleware for History, Undo/Redo and Restore Points
- React Dynadux Provider for Dynadux App Stores
- Change Log Changes of Dynadux per semver version
- 🏠 Home, Contents