react系列---【redux安装、创建仓库】

redux基础

react(组件) ---》react-redux《---- redux(数据)---》redux-thunk(fetch)《 后端

官网

https://www.cntofu.com/book/4/index.html

三大原则：

1.单一数据源
2.state是只读的
3.只能通过纯函数修改state

安装

npm i redux --save

核心概念

0.createStore()

创建仓库

import { createStore } from "redux"

// 1.初始化数据
let initState={
    name:"妲己",
    age:20,
    sex:"女"
}
/**
 * state:上一次修改完的状态,第一次设置为初始值
 * action：
        {type:'changeName',name:'王昭君'}
        {type:'changeAge',age:100}
        {type:'changeDiao'}
        {type:'changeSex'}
*/

// 2.唯一修改state的函数
function reducer(state=initState,action){
    switch(action.type){
        case "changeName":
            state.name=action.name;
            return state;
        case "changeAge":
            state.age=action.age;
            return state;
        case "changeDiao":
            state.name="貂蝉"
            return state;
        case "changeSex":
            state.sex="男";
            return state;
        default:
            return state;

    }  
}

// 3.创建仓库
let store = createStore(reducer);

// 4.导出仓库
export default store;

1.getState()

// 5.查看仓库数据 store.getState()
console.log(store.getState());

2.dispatch(action)

// 6.通过dispatch派发action ,从而触发reducer，进行修改state
store.dispatch({type:'changeDiao'})

store.dispatch({type:"changeName",name:"王昭君"})

3.添加订阅者 subscribe()

let unsub=store.subscribe(()=>{
    console.log(store.getState());
})

4.取消订阅者

// 8.取消订阅者
unsub()

React-redux

1.安装

cnpm i react-redux --save

2.入口文件通过Provider关联store和App

import store from "./store/index"

import {Provider} from "react-redux"

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  ,
  document.getElementById('root')
);

3.组件改为容器型组件；

import React, { Component } from "react";
import { connect } from "react-redux";
class C extends Component {
  render() {
    let { name, age, changeAge, changeName } = this.props;
    return (
      <div className="box">
        <h3>this is C</h3>
        <div>name:{name}</div>
        <div>age:{age}</div>
        <button onClick={() => changeName("小鲁班")}>小鲁班</button>
      </div>
    );
  }
}

let mapStateToProps = (state) => ({
  name: state.name,
  age: state.age,
  sex: state.sex,
});

let mapDispatchToProps = (dispatch) => ({
  changeName: (name) => dispatch({ type: "changeName", name: name }),
  changeAge: (age) => dispatch({ type: "changeAge", age: age }),
});
//容器型组件：该组件从状态中取数据，他一般都是路由组件，也是类定义组件
//展示型组件：该组件数据从父组件来，一般是木偶组件，也是函数定义组件
export default connect(mapStateToProps, mapDispatchToProps)(C);

4.reducer修改state应该返回一个新的state

function reducer(state=initState,action){
    switch(action.type){
        case "changeName":
            
            return {
                ...state,
                name:action.name
            };
        case "changeAge":
            return {
                ...state,
                age:action.age
            };
        case "changeDiao":
            return {
                ...state,
                name:"貂蝉"
            };
        case "changeSex":
            return {
                ...state,
                sex:"男"
            };
            
        default:
            return state;

    }  
}