使用reducers从redux获取状态的操作结构

// actions.js
export const ADD_TODO = 'ADD_TODO';

export function addTodo(text) {
  return {
    type: ADD_TODO,
    payload: text
  };
}

// reducers.js
import { ADD_TODO } from './actions';

const initialState = {
  todos: []
};

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
}

export default todoReducer;

// store.js
import { createStore } from 'redux';
import todoReducer from './reducers';

const store = createStore(todoReducer);

export default store;

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo } from './actions';

function App() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    dispatch(addTodo('New Todo'));
  };

### 遇到问题及解决方法

#### 问题：状态没有更新

**原因**：
- 可能是reducer没有正确处理动作。
- 可能是组件没有正确连接到store。

**解决方法**：
- 检查reducer中的switch语句，确保所有可能的动作类型都被处理。
- 使用Redux DevTools检查动作是否被正确分发和接收。
- 确保使用了`useSelector`或`connect`函数正确地从store中获取状态。

#### 示例代码（解决状态未更新）

```javascript
// 确保reducer正确处理动作
function todoReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
}

// 确保组件正确连接到store
function App() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    dispatch(addTodo('New Todo'));
  };

  return (
    <div>
      {todos.map((todo, index) => (
        <div key={index}>{todo}</div>
      ))}
      <button onClick={handleAddTodo}>Add Todo</button>
    </div>
  );
}