在React中处理未知数量的状态

// action类型
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';

// action创建函数
const addTodo = (text) => ({
  type: ADD_TODO,
  payload: {
    id: Math.random(),
    text,
    completed: false
  }
});

const toggleTodo = (id) => ({
  type: TOGGLE_TODO,
  payload: {
    id
  }
});

const initialState = [];

const todosReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    case TOGGLE_TODO:
      return state.map(todo =>
        todo.id === action.payload.id
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      return state;
  }
};

import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(todosReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

import { connect } from 'react-redux';

const TodoList = ({ todos, addTodo, toggleTodo }) => {
  // 渲染待办事项列表
};

const mapStateToProps = (state) => ({
  todos: state
});

const mapDispatchToProps = {
  addTodo,
  toggleTodo
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);