React Hooks 与 React-redux 结合的应用

shell
npm install react-redux

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

jsx
import { createStore } from 'redux';
const initialState = {
  todoList: []
};
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todoList: [...state.todoList, action.payload]
      };
    case 'REMOVE_TODO':
      return {
        ...state,
        todoList: state.todoList.filter(todo => todo.id !== action.payload)
      };
    default:
      return state;
  }
}
const store = createStore(reducer);
export default store;

jsx
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
function TodoList() {
  const todoList = useSelector(state => state.todoList);
  const dispatch = useDispatch();
  const [newTodo, setNewTodo] = useState('');
  const addTodo = () => {
    dispatch({ type: 'ADD_TODO', payload: { id: Date.now(), text: newTodo } });
    setNewTodo('');
  };
  const removeTodo = id => {
    dispatch({ type: 'REMOVE_TODO', payload: id });
  };
  return (
    
       setNewTodo(e.target.value)} />
      Add Todo
      
        {todoList.map(todo => (
          
            {todo.text}
             removeTodo(todo.id)}>Remove
          
        ))}
      
    
  );
}
export default TodoList;

jsx
import React from 'react';
import TodoList from './TodoList';
function App() {
  return (
    
      
TodoList App
      
    
  );
}
export default App;