Redux基础 #

Action → Reducer → Store → View
   ↑                              │
   └──────────────────────────────┘

// Action类型常量
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';

// Action创建函数
function addTodo(text) {
  return {
    type: ADD_TODO,
    payload: {
      id: Date.now(),
      text,
      completed: false
    }
  };
}

function toggleTodo(id) {
  return {
    type: TOGGLE_TODO,
    payload: { id }
  };
}

const initialState = {
  todos: [],
  filter: 'all'
};

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

    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.payload.id
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      };

    case 'REMOVE_TODO':
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload.id)
      };

    case 'SET_FILTER':
      return {
        ...state,
        filter: action.payload
      };

    default:
      return state;
  }
}

import { createStore, combineReducers } from 'redux';

// 合并多个reducer
const rootReducer = combineReducers({
  todos: todoReducer,
  user: userReducer
});

// 创建store
const store = createStore(rootReducer);

// 获取状态
console.log(store.getState());

// 订阅变化
const unsubscribe = store.subscribe(() => {
  console.log('State changed:', store.getState());
});

// 派发action
store.dispatch(addTodo('Learn Redux'));

// 取消订阅
unsubscribe();

npm install redux react-redux

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

const store = createStore(rootReducer);

function App() {
  return (
    <Provider store={store}>
      <TodoApp />
    </Provider>
  );
}

import { useSelector } from 'react-redux';

function TodoList() {
  // 获取整个状态
  const state = useSelector(state => state);
  
  // 获取特定状态
  const todos = useSelector(state => state.todos);
  const filter = useSelector(state => state.filter);

  // 计算派生状态
  const filteredTodos = useSelector(state => {
    switch (state.filter) {
      case 'active':
        return state.todos.filter(t => !t.completed);
      case 'completed':
        return state.todos.filter(t => t.completed);
      default:
        return state.todos;
    }
  });

  return (
    <ul>
      {filteredTodos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

import { useDispatch, useSelector } from 'react-redux';
import { addTodo, toggleTodo, removeTodo } from './actions';

function TodoApp() {
  const dispatch = useDispatch();
  const todos = useSelector(state => state.todos);
  const [input, setInput] = useState('');

  const handleAdd = () => {
    if (input.trim()) {
      dispatch(addTodo(input));
      setInput('');
    }
  };

  const handleToggle = (id) => {
    dispatch(toggleTodo(id));
  };

  const handleRemove = (id) => {
    dispatch(removeTodo(id));
  };

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && handleAdd()}
      />
      <button onClick={handleAdd}>添加</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span
              onClick={() => handleToggle(todo.id)}
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
            >
              {todo.text}
            </span>
            <button onClick={() => handleRemove(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

npm install redux-thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(thunk));

// 同步Action
const fetchUsersRequest = () => ({ type: 'FETCH_USERS_REQUEST' });
const fetchUsersSuccess = (users) => ({
  type: 'FETCH_USERS_SUCCESS',
  payload: users
});
const fetchUsersFailure = (error) => ({
  type: 'FETCH_USERS_FAILURE',
  payload: error
});

// 异步Action (Thunk)
export const fetchUsers = () => {
  return async (dispatch) => {
    dispatch(fetchUsersRequest());
    
    try {
      const response = await fetch('/api/users');
      const users = await response.json();
      dispatch(fetchUsersSuccess(users));
    } catch (error) {
      dispatch(fetchUsersFailure(error.message));
    }
  };
};

function UserList() {
  const dispatch = useDispatch();
  const { users, loading, error } = useSelector(state => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

src/
├── actions/
│   ├── todoActions.js
│   └── userActions.js
├── reducers/
│   ├── todoReducer.js
│   ├── userReducer.js
│   └── index.js
├── store/
│   └── index.js
└── components/
    ├── TodoList.jsx
    └── UserList.jsx

// features/todos.js

// Actions
const ADD_TODO = 'todos/ADD_TODO';
const TOGGLE_TODO = 'todos/TOGGLE_TODO';

// Action Creators
export const addTodo = (text) => ({
  type: ADD_TODO,
  payload: { id: Date.now(), text, completed: false }
});

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

// Reducer
const initialState = [];

export default function 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;
  }
}

// Selectors
export const selectAllTodos = (state) => state.todos;
export const selectActiveTodos = (state) =>
  state.todos.filter(t => !t.completed);

// actionTypes.js
export const ADD_TODO = 'todos/ADD_TODO';
export const TOGGLE_TODO = 'todos/TOGGLE_TODO';
export const REMOVE_TODO = 'todos/REMOVE_TODO';

// selectors.js
export const selectTodos = (state) => state.todos;
export const selectFilter = (state) => state.filter;

export const selectFilteredTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => {
    switch (filter) {
      case 'active':
        return todos.filter(t => !t.completed);
      case 'completed':
        return todos.filter(t => t.completed);
      default:
        return todos;
    }
  }
);

// 使用
function TodoList() {
  const filteredTodos = useSelector(selectFilteredTodos);
  // ...
}

import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);