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;
}

results matching ""

    No results matching ""