Redux基础（一）

一、redux的核心概念

Redux是一个用于JavaScript应用程序的状态管理库。它可以帮助开发人员更好地管理应用程序的状态，并更容易地进行调试和测试。以下是一些Redux的重要概念和用法：

1. Store：Redux中的状态管理中心。它是一个JavaScript对象，包含了整个应用程序的状态数据。
2. Action：Redux中的状态更新的触发器。它是一个JavaScript对象，包含一个类型（type）和数据（payload）。
3. Reducer：Redux中的状态更新逻辑。它是一个纯函数，接受一个当前状态（state）和一个操作（action），返回一个新的状态。
4. Dispatch：Redux中的状态更新发起者。它是一个函数，接受一个操作（action），并将其发送给Reducer。
5. Subscribe：Redux中的状态更新监听器。它是一个函数，接受一个回调函数作为参数，当状态更新时调用该回调函数。

使用Redux的一般流程如下：

1. 创建一个Store，将Reducer传递给它。
2. 创建一个Action，描述状态更新的类型和数据。
3. 使用Dispatch函数将Action发送给Reducer，更新状态。
4. 使用Subscribe函数监听状态更新，更新UI。

二、简单的小Demo

我们定义了三个Action类型和三个Action Creator来描述状态的更新。Reducer则根据Action的类型来更新状态。我们还定义了一个Middleware来处理异步的Action，使用了Redux Thunk库来实现异步Action的处理。

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

// Action Types
const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';
const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';

// Action Creators
const fetchUsersRequest = () => {
  return {
    type: FETCH_USERS_REQUEST
  };
};

const fetchUsersSuccess = (users) => {
  return {
    type: FETCH_USERS_SUCCESS,
    payload: users
  };
};

const fetchUsersFailure = (error) => {
  return {
    type: FETCH_USERS_FAILURE,
    payload: error
  };
};

// Reducer
const initialState = {
  loading: false,
  users: [],
  error: ''
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_USERS_REQUEST:
      return {
        ...state,
        loading: true
      };
    case FETCH_USERS_SUCCESS:
      return {
        loading: false,
        users: action.payload,
        error: ''
      };
    case FETCH_USERS_FAILURE:
      return {
        loading: false,
        users: [],
        error: action.payload
      };
    default:
      return state;
  }
};

// Middleware
const fetchUsers = () => {
  return (dispatch) => {
    dispatch(fetchUsersRequest());
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        const users = response.data;
        dispatch(fetchUsersSuccess(users));
      })
      .catch(error => {
        const errorMsg = error.message;
        dispatch(fetchUsersFailure(errorMsg));
      });
  };
};

const middleware = applyMiddleware(thunk);

// Store
const store = createStore(reducer, middleware);

export default store;

三、拆分Reducer

// 多个Reducer 创建store
import { createStore, combineReducers } from 'redux';
import userReducer from './reducers/userReducer';
import productReducer from './reducers/productReducer';
import cartReducer from './reducers/cartReducer';

const rootReducer = combineReducers({
  user: userReducer,
  product: productReducer,
  cart: cartReducer
});

const store = createStore(rootReducer);

export default store;

// 获取各个模块的数据
import store from './store';

const user = store.getState().user;
const products = store.getState().product;
const cartItems = store.getState().cart;

四、监听State的变化

import { createStore } from 'redux';

// 定义 reducer
const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

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

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

// 分发 action
store.dispatch({ type: 'INCREMENT' }); // state changed: { count: 1 }
store.dispatch({ type: 'INCREMENT' }); // state changed: { count: 2 }

// 取消订阅 state 变化
unsubscribe();

// 分发 action
store.dispatch({ type: 'DECREMENT' }); // 不会输出任何内容