React-Redux

作用

---

React-Redux 将Redux store注入全局,React-Redux是增强Redux,不是一个新的独立的模块,运行要依赖Rudex

使用

---

搭建redux,暴露store

将状态写入全局( Provider)

main.js引入

使用模块下面 Provider可以将store传递给包裹的所有的子元素

---

import {Provider} from "react-redux";

import store from "./store";

ReactDOM.render(

   

       

    ,

document.getElementById('root'));

---

组件react-redux

在App.jsx引入

import {connect} from "react-redux";

class App extends Component {

  render() {

      console.log(this)

    return (

     

       

{this.props.n}

        修改数据

     

    );

  }

}

//定义属性

const mapStateToProps = (state)=>({

  num:state.num

})

//定义方法

const mapDispatchToProps = (dispatch)=>({

  handleAdd(){z

    let action = {

      type:"NUM_ADD"

    }

    dispatch(action);

  }

})

//connect 传入两个人参数

//mapStateToProps  一个是state映射

//mapDispatchToProps 一个是action映射

//不是固定写法但是推荐这样写

//connect 是一个高阶组件

export default connect(mapStateToProps,mapDispatchToProps)(App);

---

模拟高阶组件调用

//简化1

const headerHoc = (num1)=>(num1)=> {

    return num1 +num1;

}

//简化2

const headerHoc = (num1)=>{

  return (num2)=> {

    return num1 +num2;

  }

}

console.log(headerHoc(1)(2))

---

发现一个问题

数据改变,视图不更新的问题,尝试使用深度拷贝实现

完美解决吗?没有年轻人! 开启Redux之immutable 终章之战

const defaultState = {

    num:10

}

const store= (state=defaultState,action)=>{

  var testState={...state};

  switch(action.type){

        case "NUM_ADD":

          let newTest=JSON.parse(JSON.stringify(state));

          return newTest.num++;

      default:

          return state;

    }

}

export default store;