First of all, let's create a file for our reducer, which is always just a function:
// src/reducers/reducer_weather.js
export default function (state = null, action) {
console.log('Action received', action);
return state;
}
Then, let's combine this reducer in object which is sent to combineReducers (redux) function of the rooReducer:
// src/reducers/index.js
import { combineReducers } from 'redux';
import WeatherReducer from './reducer_weather'
const rootReducer = combineReducers({
weather: WeatherReducer
});
export default rootReducer;
Let's come back to the reducer. If we are going to get a list data structure, then we should chang a state assignment in argument to reducer.
// src/reducers/reducer_weather.js
...
export default function (state = [], action) {
return state;
}
Then we should return som data. We never ever should change the state. The better descision is to concatenate the state with the data we've fetched:
// src/reducers/reducer_weather.js
...
export default function (state = [], action) {
switch (action.type) {
case FETCH_WEATHER:
return state.concat([action.payload.data]);
}
return state;
}
We could simplify this with ES6 synthax:
// src/reducers/reducer_weather.js
...
export default function (state = [], action) {
switch (action.type) {
case FETCH_WEATHER:
return [action.payload.data, ...state];
}
return state;
}