Should I dispatch an action when typing?

Active3 hr before
Viewed126 times

10 Answers


1) If the input value is not required by other components (be it sibling, parent, or even unrelated components), there is not need to persist it on your store. You should just encapsulate it within your component's state,2) If it is required by other components, you choose to keep the input in store. Do take note that if you follow this approach, you will have to update the store at every instance the input value has changed., You need to also consider re-rendering. The internal state might update just the input component, whereas state update might unnecessary re-render more components – vitkon May 6 '20 at 11:06

1) If the input value is not required by other components (be it sibling, parent, or even unrelated components), there is not need to persist it on your store. You should just encapsulate it within your component's state

[inputvalue, setInputValue] = useState('');

<input value={inputvalue} onChange={(e) => setInputValue(}
load more v

Type safety for reducers, state and action creators, and UI components,Define Root State and Dispatch Types,Reducers are pure functions that receive the current state and incoming action as arguments, and return a new state.

import { configureStore } from '@reduxjs/toolkit'// ...
const store = configureStore({  reducer: {    posts: postsReducer,    comments: commentsReducer,    users: usersReducer  }})
// Infer the `RootState` and `AppDispatch` types from the store itselfexport type RootState = ReturnType<typeof store.getState>// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}export type AppDispatch = typeof store.dispatch
load more v

Redux 4 introduces a type-safe dispatch function, which means that the argument passed to dispatch() must be the type of the first Dispatch<Action> parameter. If I knew this ealier, it would save me two hours debugging and searching why dispatch() with an incomplete action doesn't trigger an error :) I think this deserves its section in the guide.,I just wanted to raise attention to the two places where you're giving an example with mapDispatchToProps and dispatch is typed as Dispatch, while the proper type is Dispatch<ActionType>. Otherwise you'd get a compilation error for the missing tempalte parameter.,And a connected component dispatches an action:

type MyActionType = |
      type: "STAND_UP",
      who: number
   } |
      type: "SIT_DOWN",
      who: number
load more v

The above implies that we do not need to dispatch our actions. We just need to pass an object to "connect”. We can then call the wrapped actions from our props.,Passing dispatch method to our component,Unlike in redux-thunk, our component here dispatches a plain object action. We'll add the following code in sagas.js:

1// App.js
2import { createStore } from 'redux';
3import { MessageSender } from './MessageSender';
4import reducer from './reducer';
6const store = createStore(reducer);
7class App extends React.Component {
8 render() {
9 <MessageSender store={store} />
10 };
load more v

If you're really paying attention, you'll also remember that we said actions, ideally, should report things that happened, not make things happen. If the dispatch is the report, then what actually sends the report!?,So please, just remember that simply calling an action creator does nothing for your application state. Only dispatching actions can update your application state.,Calling an action creator does nothing but return an object, so you have to either bind it to the store beforehand, or dispatch the result of calling your action creator.

It may start to get a bit arduous to have to type this each time:

   type: 'ITEM_ADDED_TO_CART',
   payload: 47
load more v

The first action creator gets the people array from the server asynchronously dispatching 2 actions along the way:,Redux is a popular library used to manage state in React apps. How can we make our Redux code strongly-typed with TypeScript - particularly when we have asynchronous code in the mix? Let’s find out by going through an example of a store that manages a list of people …,The second action creator is similar but this time the asynchronous function that calls the server has a parameter:

interface IPeopleState {
   readonly people: IPerson[];
   readonly loading: boolean;
   readonly posting: boolean;

export interface IAppState {
   readonly peopleState: IPeopleState;

const initialPeopleState: IPeopleState = {
   people: [],
   loading: false,
   posting: false,
load more v

Here, the function addArticle will dispatch an action for adding a new article, and the method removeArticle will do the opposite. So delete the object passed in as an argument.,Redux can offer a better developer experience when you use it along with TypeScript. TypeScript is a superset of JavaScript that type-checks code to make it robust and understandable.,To add a new article, we will be using this form component. It receives the function saveArticle as a parameter, which allows adding a new article to the store.

 Pretag team - issue, fix, solve, resolve

It is a function that will let us dispatch actions that will trigger state changes. Similarly to ReducerState, ReducerAction extracts action type from Reducer.,Next, I need to update the usage of useEffect react state hook so that it dispatches relevant actions.,The second action will be triggered when the data from the backend is fetched. Action object should contain this data.

 Pretag team - issue, fix, solve, resolve

 Pretag team - issue, fix, solve, resolve

 Pretag team - issue, fix, solve, resolve

Other "action-dispatch" queries related to "Should I dispatch an action when typing?"