todos1 - react-redux

Premise:

   Use Create-react-app(v1.1.4) to build.

    1) code

       With react, add functionality has been implemented。

Step1: combineReducers

    src/reducers/index.js

import { combineReducers } from 'redux'


export default combineReducers({

})

1. Add toggle

    src/reducers/toggleTodo.js

扫描二维码关注公众号,回复: 1531955 查看本文章
const toggleTodo = (state = [], action) => {
    switch(action.type) {
        case 'TOGGLE_TODO':
            return state.map(
                todo =>
                    (todo.id === action.id)
                      ? {...todo, completed: !todo.completed}
                      : todo
            )
            
        default:
            return state;
    }
}

export default toggleTodo;

2. add Visibility Filters

    src/reducers/visibilityFilters.js

import { VisibilityFilters } from '../actions'

const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

export default visibilityFilter

3. final index.js

import { combineReducers } from 'redux';
import toggleTodo from './toggleTodo';
import visibilityFilter from './visibilityFilter';

export default combineReducers({
    toggleTodo,
    visibilityFilter
})

Reference:

    1. combineReducers

   

猜你喜欢

转载自www.cnblogs.com/xiaobin-hlj80/p/9158156.html
今日推荐