Awesome q2a theme

As it will look similar to the code in any action creator?

0 like 0 dislike
47 views
Help to understand how the action Creator's

actions.js
import { CALLBACK_SEND, CALLBACK_LOADING, CALLBACK_ERROR, CALLBACK_SUCCESS } from './constants/actionTypes'; export const send = ({ name, phone }) => { return async (dispatch) => { try { dispatch(loading()); const result = await axios.post('/callback', { name, phone }); dispatch(success()); } catch (e) { dispatch(error(e)); } } }; const loading = () => ({ type: CALLBACK_LOADING }); const success = () => ({ type: CALLBACK_SUCCESS }); const error = (message) => ({ type: CALLBACK_ERROR, message: message });


reducer.js
import { CALLBACK_SEND, CALLBACK_LOADING, CALLBACK_ERROR, CALLBACK_SUCCESS } from './constants/actionTypes'; const initialState = { loading: false, status: null, message: null } export default (state = initialState, action) => { switch (action.type) { case CALLBACK_LOADING: return { ...state, loading: true }; case CALLBACK_SUCCESS: return { ...state, status: 'OK' }; case CALLBACK_ERROR: return { ...state, status: 'ERROR', message: action.message }; default: return state; } }


Can redux-actions or redux-act
by | 47 views

3 Answers

0 like 0 dislike
You send a simple object:
{ type: 'BLA_BLA' }

This is your action.

It
function qq() { return { type: 'BLA_BLA', } }

your "Creator of the action" (action creator).

The object type (and data if needed), hit reducer, it is necessary to shoot through a dedicated "pipe" - the dispatch (dispatcher).

That is:
dispatch(qq()) // or dispatch({ type: 'BLA_BLA', })


Then, passed through the "Manager" object that will go into all reduceri. In some reduceron, will the command "FAS" for a certain type (type), in our case the string 'BLA_BLA', then:

export default (state = initialState, action) => { switch (action.type) { case 'BLA_BLA': // here comes the javascript compiler, so you've got the right case // for the above indicated switch according to the type of action (action.type) // below you do what you need with your data // specifically, in this case, you take everything you had to state, and change the loading to true return { ...state, loading: true }; case CALLBACK_SUCCESS: // here the action of type 'BLA_BLA' does not hit return { ...state, status: 'OK' }; case CALLBACK_ERROR: // here too return { ...state, status: 'ERROR', message: action.message }; default: // and here return state; } }
by
0 like 0 dislike
The question is incorrect. Action creators are the functions return objects of the action(Actions) those that you have in actions.js
Action is an object with a property type(action type) and optional payload, which is transmitted to dispatch.

redux-actions and redux-act is boilerplate utilities to generate action creators and reduceron. Suggest don't even look in their direction(and you can do not to look), better take a good look at the bare API Redux.
I advise you to spend time to familiarize yourself with immutable.js

And yet, your code in actions.js will not work, as the functions of loading, success, error used before defined.
Either swap to send was declared underneath:
const loading = () => ({ ... }); const success = () => ({ ... }); const error = (message) => ({ ... }); export const send = ({ name, phone }) => { ... };

or use the keyword function:
export const send = ({ name, phone }) => { ... }; function loading() { return { ... }; }; function success() { return { ... }; }; function error(message) { return { ... }; };

And here you can read about the difference between Function Declaration and Function Expression.
by
0 like 0 dislike
As says the documentation, action creators are functions that create action. That is, the function that returns the action (the object). In your case action creators is loading, success, error
redux-actions and redux-act is already a helper library as a more laconic approach.
by

Related questions

0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
110,608 questions
257,187 answers
0 comments
40,796 users