Storing to Redux on page load - reactjs

Question

I am quite new to React and Redux framework. What I am trying to do is reading a propery say zipCode from an API call on componentDidMount. And now I have to save it to redux store.
I am really confused reducers and actions etc. And not sure how and where to configure those.
Help much appreciated.

Answer 1

Redux can seem confusing at first glance, as I have experienced. But like everything, you will start to understand it quickly, especially if you practise making your own redux application(with the support of this community) and succeed by trial and error.
What you must understand about Redux are the following (I wont go into detail, ill keep it simple and basic, as well as relate it to your question):
1. Actions: These are as the name suggests, actions fired by the view/component. E.g. when you request to fetch the zipcode, this will be dispatched to the action.
componentDidMount(){
this.props.fetchZipCode(85001);
}
action.js
export const fetchZipCode= (zip) => ({
type: 'FETCH_ZIPCODE',
zip,
});
2. Reducers: These handle the actions request. As described in Redux docs 'The reducer is a pure function that takes the previous state and an action, and returns the next state'
reducer.js
const ZipcodeInfo = (state = 0, action) => {
switch (action.type) {
case 'REQUEST_ZIPCODE':
return {
...state
};
case 'RECEIVE_ZIPCODE':
return {
...state
zip: action.data.zipcode
};
case 'RECEIVE_ZIPCODE_FAILED':
return {
...state
}
default:
return state;
}
};
3. Store: This is what brings everything together. It holds application state, allows access to the store.
index.js (note: this is the root file of the application, so all states can be passed from the store to all components in your app)
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux'
import ZipcodeInfo from './reducers'
const store = createStore(ZipcodeInfo)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
registerServiceWorker();
4. Middleware: Now the middleware is not necessary, but if you are making async calls you will need to use a middleware to pass information to the API etc... There a many middlewars to use for redux.
Redux-saga middleware example
import {call, put, takeEvery, fork} from 'redux-saga/effects';
import * as service from '../Services/api';
import * as actions from '../actions/zipcode';
//The worker: will handle the action and terminate
function* fetchZipcode(action){
try{
yield put(actions.requestZipcode());
const [zipcode] = yield [call(service.getZipcodeAPI, action.zip)];
yield put(actions.receiveZipcode(zipcode));
} catch(e){
yield put(actions.receiveZipcodeFailed(e));
}
}
//The watcher: will watch for dispatched actions and fork a worker on every action
function* watchfetchZipcode(){
yield takeEvery('FETCH_ZIPCODE', fetchZipcode);
}
export default function* zipcodeSaga(){
yield fork(watchfetchZipcode);
}
I personally prefer Redux-Saga as a middleware, but it may be confusing as it uses generators(from es6) and more unknown terms.

Answer 2

Watch the below tutorial. It's a simple example to understand.
https://www.youtube.com/watch?v=OSSpVLpuVWA