管理不断变化的 state，Redux + React
「写在前面：Redux 和 React 之间没有关系」
安装
npm install --save redux
React 绑定库和开发者工具
npm install --save react-redux
npm install --save-dev redux-devtools
redux 三大原则
-
单一数据源
-
state 是只读的
-
使用纯函数执行修改
action创建函数
action 来描述“发生了什么” store 数据的唯一来源 actions.js
export const SET_LOG_USER = 'SET_LOG_USER';
// 用户登录，存储用户信息
export const loginUserTodo = (userData) => ({
type: SET_LOG_USER,
userData,
});
reducer
reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。 使用 reducers 来根据 action 更新 state
(previousState, action) => newState
loginReducers.js
import { getAuth, getUserData } from '@/utils/localStroage';
import { SET_LOG_USER } from '../actionTypes';
const initState = {
auth: getAuth(), // 登录信息储存到 localstroage
userData: getUserData(),
};
export const loginReducer = (state = initState, action) => {
switch (action.type) {
case SET_LOG_USER: {
setAuth(true);
setUserData(action.state);
return { ...state, ...action.state, auth: true };
}
default:
return state;
}
};
reducers.js
import { combineReducers } from 'redux';
import { loginReducer } from './loginReducers';
const combineAllReducers = combineReducers({
loginReducer,
});
export default combineAllReducers;
Store
Store 就是把reducer 和 action联系到一起的对象
-
维持应用的 state；
-
提供 getState() 方法获取 state；
-
提供 dispatch(action) 方法更新 state；
-
通过 subscribe(listener) 注册监听器;
-
通过 subscribe(listener) 返回的函数注销监听器。
Redux 应用只有一个单一的 store
store.js
import { createStore } from 'redux';
import combineAllReducers from './reducers';
const store = createStore(combineAllReducers);
export default store;
数据流
严格的单向数据流是 Redux 架构的设计核心。
Redux 应用中数据的生命周期遵循下面 4 个步骤：
-
调用 store.dispatch(action)
-
Redux store 调用传入的 reducer 函数。
-
根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
-
Redux store 保存了根 reducer 返回的完整 state 树
搭配React
安装 react-redux
Redux 默认并不包含 React 绑定库，需要单独安装
npm install --save react-redux
实现容器组件
容器组件就是使用 store.subscribe() 从 Redux state 树中读取部分数据，并通过 props 来把这些数据提供给要渲染的组件。你可以手工来开发容器组件，但建议使用 React Redux 库的 connect() 方法来生成，这个方法做了性能优化来避免很多不必要的重复渲染。
使用 connect() 前，需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中。例如，VisibleTodoList 需要计算传到 TodoList 中的 todos，所以定义了根据 state.visibilityFilter 来过滤 state.todos 的方法，并在 mapStateToProps 中使用。
import { connect } from 'react-redux';
import { loginUserTodo } from '@/redux/actions';
import Login from './components';
const mapStateToProps = (state) => ({
auth: state.loginReducer.auth,
});
const mapDispatchToProps = (dispatch) => ({
loginIn: (data) => {
dispatch(loginUserTodo(data));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);
传入 store
所有容器组件都可以访问 Redux store，所以可以手动监听它。一种方式是把它以 props 的形式传入到所有容器组件中。但这太麻烦了，因为必须要用 store 把展示组件包裹一层，仅仅是因为恰好在组件树中渲染了一个容器组件。
建议的方式是使用指定的 React Redux 组件 来 魔法般的 让所有容器组件都可以访问 store，而不必显示地传递它。只需要在渲染根组件时使用即可。
import React from 'react';
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
import App from './pages/App';
import store from './redux/store';
ReactDom.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'),
);
module.hot.accept();
