React Native Redux: Action dispatched, return results

Question

In redux, when an action is dispatched, reducer will change the state accordingly, the component which have called the action, also have access to the state ( passed through

Answer 1

In redux, when an action is dispatched, reducer will change the state accordingly, the component which have called the action, also have access to the state ( passed through props by Provider ). Am I right?

Yes, you are right. When action is dispatched, you need to specify the action creator, inside action creator you can fire sync or async action (using thunk or saga) and each action create have actionType and payload(optional. On calling action inside action creator, all the reducers will get inform and matches the type passed by action.

is the state the only way to access results of the action in the component? ( the component which have called the action ).

As redux best practice, state should be changed by reducer(as a pure function), which passed as a props to component if you listening to that state.

How about passing a callback function to the action, and using that to send the result back to the component?

you can pass callback function to action creator, action creator is just a function.

Answer 2

In redux, when an action is dispatched, reducer will change the state accordingly, the component which have called the action, also have access to the state ( passed through props by Provider ). Am I right?

When an action is triggered in the redux pattern, all the reducers run, but only the reducers which are to act on this type of action will do the reducing job on the store. Sometimes you can have an action that doesn't return an action type. I usually return an action object if I want a reducer to reduce a state in the application store, else I don't need to. Remember when a state is reduced, all the component rendering it's value are re-rendered.

is the state the only way to access results of the action in the component? ( the component which have called the action ).

I think you can design an action to return it results after its execution, but you will not be using the redux pattern fully.

How about passing a callback function to the action, and using that to send the result back to the component?

I have never tried this before, but I think promises are a good option. I always use axios for fetching my results from the server, if the I have the result, then another axios is dispatch for the reducer to update the state, else a reducer for error handling is dispatched.

//actions
const axios from 'axios'
const FETCH_ITEMS = 'FETCH_ITEMS'
const FETCH_ITEMS_RECEIVED = 'FETCH_ITEMS_RECEIVED'
const FETCH_ERROR = 'FETCH_ERROR'
const SERVER_BASE_URL = 'localhost:4000/'

export function itemsReceive(items){
   return {
      type: FETCH_ITEMS_RECEIVED,
      items
    }
}

export function itemsFetchError(){
   return {
      type: FETCH_ERROR,
      errorMsg: 'There was an issue fetching items.'
    }
}

//This function shall dispatch the two actions above in case we have the expected result or an error.
export function fetchItems(){
    return dispatch => {
       axios.get(SERVER_BASE_URL  + 'items').
        then(function(res){
           const { data } = res
             if(data.status === 0){ //data.status is just a status sent by my server to show the response is good.
               const items = data.response
               dispatch(itemsReceive(items))
             }else{
               dispatch(itemsFetchError())
             }
        }).catch(function(err)){//this error here is usually caused by network disruption
              dispatch(itemsFetchError())
        }
    }
}