What is the best practice for updating the local variables in redux-thunk after getting the response from api?

Question

I have implemented the redux-thunk which works just fine in my react-native application. I have some 'this.counterValue', which value must be updated after getting the response from the api. As api fetch methods are implemented in another actions files, and response is achieved in that file. So, how must it be implemented to make this work fine.I don't want the change in 'this.counterValue' results in re-render of my application. I am new to react native, it would be great to be helped. Thanks.

Component file:

this.counterValue = 75; //local variable
this.props.fetchData('onStart'); // call to fetch data from actions files

Action file:

    export const fetchData = (fetchType) => {
        return async dispatch => {

            dispatch(fetchingDataRequest());

            fetch(AllApi),
            {
                method: 'GET',
                headers:
                {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer '+ global.apiToken,
                },

            })
            .then(response => {
                return response.json()
            })
            .then(RetrivedData => {
                dispatch(fetchingDataSuccess(RetrivedData.data));
            })
            .catch(error => {
                dispatch(fetchingNotificationFailure(error));
            });
        }
    }

How about implementing `shouldComponentUpdate`? – Tien Duong Aug 08 '19 at 05:09 — Tien Duong, Aug 08 '19 at 05:09
How about using state and reducers – Sanjeev S Aug 08 '19 at 05:16 — Sanjeev S, Aug 08 '19 at 05:16

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

using dispatch send the data to the reducer and in reducer update the state value which then you could use it in the component.

Reducer

import { reducerWithInitialState } from 'typescript-fsa-reducers'
import { DemoListViewActions } from './Actions'

export interface DemoListViewState {
  data: any[]
  selectedData: any
}

const initialState: DemoListViewState = {
  data: [],
  selectedData: undefined
}

const dataListRequestSuccessHandler = (state: DemoListViewState, payload: any[]): DemoListViewState => {
  return {
    ...state,
    data: payload
  }
}


export const DemoListViewReducer = reducerWithInitialState(initialState)
  .case(DemoListViewActions.dataListRequestSuccess, dataListRequestSuccessHandler)
  .build()

Container

const mapStateToProps: MapStateToProps<IDemoListViewStateProps, OwnProps, RootState> = (state: RootState, ownProps: OwnProps) => {
  const {data} = state.demoListView
  return {
    listData: data
  }
}

Component

export interface IDemoListViewStateProps {
  listData: any[]
}

just store it in props and state and you could manipulate it easily

score 0 · Answer 2 · answered Aug 08 '19 at 05:26

After dispatching your action,you have to update your reducer

 Import Action from './Action'
 const initialState = { 
  people :[  ] // initiate empty array
    }

   export default function(state=initialState,action){
    switch(action.type){
    case Action.test:
   return testUpdate(state,action)
   default :
    return state
    }
    }
    //Update the result from the api,people array will be populated 
  with latest data
   function testUpdate(state,action){
   return {...state,people:action.payload.people}
   }

What is the best practice for updating the local variables in redux-thunk after getting the response from api?

2 Answers2

Reducer

Container

Component