javascript 终极版，sample.js

Posted 2021-05-04

// redux sample

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter
  } else {
    return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([{ text: action.text, completed: false}])
    case 'TOGGLE_TODO':
      return state.map(
        (todo, index) =>
          action.index === index
            ? { text: todo.text, completed: !todo.completed }
            : todo
      )
    default:
      return state
  }
}

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}


const initialState = {
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

const actions = [
  { type: 'ADD_TODO', text: 'Go to swimming pool' },
  { type: 'TOGGLE_TODO', index: 1},
  { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL'}
]

// launch app
const app = todoApp(initialState, {type: 'launch'})
// show initial state of app
console.log(app)
// show action changing state of app
actions.reduce((state, action) => {
  const newState = todoApp(state, action)
  console.log(newState)
  return newState;
}, app)