Redux Actions
Redux actions, generally should return a simple JSON object. This is because they should be serialized and replayable into the application state. Even if your actions need to return promises, the final dispatched action should remain a plain JSON object.
Redux actions are generally where side-effects should happen, such as making API calls, or generating ID's. This is because when the final action gets dispatched to the reducers, we want to update the application state to reflect what has already happened.
Lets take a look at the actions that are used in this example. For now, lets just focus on the synchronous actions.
Synchronous Actions
As you can see, the actions creators are simple functions that take parameters, and return a JSON object containing more information. Actions follows the Flux Standard Action and contain the properties:
type: a string/enum representing the action
payload: the data that you want to pass into the reducer if applicable
meta? : optional - any extra information
When using Redux, libraries like react-redux will take care of wrapping your actions into the dispatch so they will get passed off to the store appropriately.
Asynchronous Actions
To do async operations, or have actions that return something other than a plain JSON object, you need to register a middleware with redux. For our examples, we can use the thunk
middleware, and setting this up is covered later in the training. For now, all you need to know is that once you register a middleware with redux, you can make dispatch
and getState
available to your actions. To show how these are used, lets take a look at the incrementIfOdd
and increaseAsync
actions.
In the incrementIfOdd
action, we are making use of the getState function to get the current state of the application.
In the incrementAsync
action, we are making use of dispatch. For example, we have created a Promise that will resolve after the delay. Once the Promise resolves, we can then do a dispatch with the increase action. However, this promise could also be an API call, with the dispatched action containing the result of the API call.
Last updated
Was this helpful?