Skip to content

Latest commit

 

History

History
79 lines (61 loc) · 2.64 KB

Advanced-BlockChanges.md

File metadata and controls

79 lines (61 loc) · 2.64 KB

🏠 Home 🏠 Advanced

Advanced - Block Changes (block Renders for react components)

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.

Block change from reducer

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.

Block change with dispatch() function

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});    

🏠 Advanced

Read more