前言：根据不完全统计：”一个网站能留住一名用户的时间只有 8S，如果你在 8S 内不能吸引住用户，或者网站出现了问题，那么你将彻底地丢失这名用户！”
一、React redux
1、为什么要使用 redux ？
在 React 中，我们将状态存在每个组件的 this.state 中，每个组件的 state 为组件所私有，如果要在一个组件中操作另外一个组件，实现起来是相当繁琐的。如果 组件B 想要改变 组件C 的状态时，就需要层层传递相关一些变量或者方法，假如这两个组件的层级都很深，就会导致中间过程中所有组件都会触发重新渲染，造成了巨额的开销。组件B<--...--组件A---...-->组件C。
2、安装redux、react-redux
npm install redux
npm install react-redux
3、关键词
App.tsx文件：
// app.tsx 引入 createStore 和Provider
import { createStore } from "redux";
import { Provider } from "react-redux";
...
// 创建 Store 的初始状态数据
const initialState = {
todos: [{
id: 1,
text: "你好, 图雀",
completed: false
}],
filter: false
};
...
const rootReducer = (state, action) => {
return state;
};
...
// `createStore` 函数，传入定义的 `rootReducer` 和 `initialState`
const store = createStore(rootReducer, initialState);
...
ReactDOM.render(
// 使用 Provider 包裹 App 组件 ，并接收 store，这样子组件就可以访问 store 中的状态
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root"));
子组件
// 引入 connect
import { connect } from "react-redux";
class App extends React.Component {
render() {
// 直接使用 store 中的属性
const { todos, filter } = this.props;
return (
...
);
}
}
// mapStateToProps函数：同时操作组件的原 `props` 和 Store 的状态，然后合并成最终的组件 props
const mapStateToProps = (state, props) => ({
todos: state.todos,
filter: state.filter
});
/**
`connect` 函数接收 `mapStateProps` 函数，获取 `mapStateProps` 返回的最终组合后的状态，
然后将其注入到 `App` 组件中，返回一个新的组件，然后交给 `export default` 导出。
*/
export default connect(mapStateToProps)(App);
- 创建 src/actions/index.ts
let nextTodoId = 0;
export const addTodo = text => ({
type: "ADD_TODO",
id: nextTodoId++,
text
});
- 组件中使用 action
import { connect } from "react-redux";
import { addTodo } from "../actions";
const AddTodo = ({ dispatch }) => {
let input;
return (
<div>
<form onSubmit={e => {
e.preventDefault();
if (!input.value.trim()) {
return;
}
dispatch(addTodo(input.value));
input.value = "";
}}>
<input ref={node => (input = node)} />
<button type="submit">Add Todo</button>
</form>
</div>
);
};
/**
`connect` 函数，它负责将 Store 中的状态注入组件的同时，还给组件传递了一个额外的方法：`dispatch`，
这样我们就可以在组件的 `props` 中获取这个方法
*/
export default connect()(AddTodo);
- Reducers 创建 src/index.js
// 定义 rootReducer
const rootReducer = (state, action) => {
switch (action.type) {
case "ADD_TODO": {
const { todos } = state;
return {
...state,
todos: [
...todos,
{
id: action.id,
text: action.text,
completed: false
}]
};
}
default:
return state;
}
};
