js中调用action方法

// 定义一个action类型
const ADD_TODO = 'ADD_TODO';

// 定义一个action创建函数
function addTodo(text) {
  return {
    type: ADD_TODO,
    payload: text
  };
}

// 在组件中调用action
import { useDispatch } from 'react-redux';

function TodoInput() {
  const dispatch = useDispatch();

  function handleSubmit(event) {
    event.preventDefault();
    const input = event.target.todo.value;
    dispatch(addTodo(input));
    event.target.todo.value = '';
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="todo" />
      <button type="submit">Add Todo</button>
    </form>
  );
}

// Reducer示例
function todosReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { text: action.payload, completed: false }];
    default:
      return state;
  }
}

import { createStore } from 'redux';
import todosReducer from './todosReducer';

const store = createStore(todosReducer);