React开发实践之（4）redux入门

1、数据都放在一个 store 中管理 不同组件引用 store 的数据
2、一个组件数据变化 则会引起 其他组件数据的变化 
复制代码

1、安装  yarn add antd
    2、引入  
    3、需要特别注意引入 样式文件 import 'antd/dist/antd.css';
    4、使用 
复制代码

import { Input, Button, List } from "antd";
import "antd/dist/antd.css";
class TodoList extends Component {
  render() {
    const data = ["test", "test2", "test3"];
    return (
      <>
        <div>
          <Input
            placeholder="TodoList"
            style={{
              width: "300px",
              marginRight: "10px",
              marginLeft: "10px",
              marginTop: "10px",
            }}
          />
          <Button type="primary">提交</Button>
        </div>
        <List
          style={{ width: "300px", marginLeft: "10px" }}
          dataSource={data}
          renderItem={(item) => <List.Item>{item}</List.Item>}
        />
      </>
    );
  }
}
export default TodoList;
复制代码

1、安装 
2、配置一下  创建store时 第二个参数传递 这个东西 
复制代码

1、store 是唯一的 
  2、state 只有 store 能改变 reducer 不能改变 state, 只能拷贝一份 拿到store 给的 (prevState, action) ---> 得到一个新的 newState 给 store 
  3、 Reducer 必须是纯函数，给定 固定的输入，输出则是固定的，不能夹杂 = new Date() 这样的操作，并且不能直接修改 state， 比如 state.value = action.value 
  4、action 是个对象 type 和 payload 
复制代码

1、createStore 创建一个 store 存储数据
 2、store.dispatch(action) 将 action行为 传递到 store 
 3、store.getState() 拿到 store 里的 state
 4、store.subscribe(this.handleXxx) 订阅 store 的变化， store 值更改 则会触发里面的回调函数
复制代码