react-redux

Redux

• 是js容器，用于进行全局的 状态管理
• 它可以用在react, angular, vue等项目中, 但基本与react配合使用
• 三大核心：
  • 单一数据源
    • 整个应用的state被存储在一棵 object tree中，并且这个 object tree只存在于一个唯一的 store 中
  • State是只读的
    • 唯一改变state的方法就是触发action，action 是一个用来描述已发生事件的普通对象
  • 使用纯函数来修饰
    • 为了描述 action 如何改变state tree，需要编写 reducers;
    • reducer 是纯函数 ，它接收先前的 state 和 action,并且返回新的 state.
    • 可以复用，可以控制顺序、传入附加参数

  Redux组成

  • state:
    • 指传递的 数据 ；可以分为以下三类
    • DomainDate: 服务端的数据
    • UI state: 展示ui 状态等
    • App state: App级别的状态；
  • Action:
    • 把数据从应用传到 store 的载体，它是 store 数据的唯一来源。一般来说可以通过 store.dispatch() 将 action 传递给 store
    • js对象； 用来描述已发生事件的普通对象； 对象内部必须要有一个 type 属性来表示要执行的动作
  • Reducer:
    • 函数
    • 用来响应发送过来的action,然后经过处理，把 state 发送给 store
    • 注意：需要 return 返回值； 函数会接受两个参数，第一个是初始化的state,第二个是action
  • Store :
    • store就是把 action 与 reducer 联系到一起的对象
    • 通过creatStore创建

  React-redux

  React-redux概述

  • react-redux 是 redux 官方出的； 用于配合 react 的绑定库
  • react-redux 能够使你的 react 组件从 redux store 中方便的读取数据， 并且向 store 中分发 actions 以此来更新数据
  • 两个重要成员： Provider 和 connect
  • Provider
    • Provider 包裹 在根组件最外层，使所有组件都可以拿到 state
    • Provider 接收 store 作为props,然后通过 context 往下传递，这样 react中任何组件都可以通过 cntext 获取到 store

     import { Provider } from "react-redux";
     ReactDOM.render(
           <Provider store={store}>
              ...字组件...
           </Provider>
         ,
         document.getElementById('root')
       );
    

  • connect
    • Provider 内部组件如果想要使用到 state中的数据，就必须要 connect 进行一层包裹，换句话说就是必须要被 connect 进行加强
    • connect 就是方便我们组件能够获取到 store中的 state

React-redux基本使用

• 安装

   yarn add react-redux
   npm install react-redux
  
  //react-redux 还需要依赖 redux 中的 store,所以还需要安装 redux
  npm install redux
  

• 用 redux 来构建 store
  • 创建 reducer/index.js 文件，构建reducer来响应 actions
  • 创建 store/index.js 文件，通过createStore方法，把reducer 传进来

    //store/index.js
      import  { createStore } from "redux"
      import { reducer } from "./reducer"
      export default createStore(reducer)
   // reducer/index.js 
   const initState = { count:0 }
   export.reducer = ( state = inistate, action ) => {
    switch (action.type){
      case 'add_action':
      return {
          count: state.count + 1
      }
      default: 
        return state;
    }
   }
  

  • 在 app.js中引入 store
• 引入 Provider 组件
  • 在app.js 中 导入 Provider 组件
  • 利用 Provider 组件将整个结构进行包裹，并传递 store

   import { Provider } from 'react-redux'
   function App(){
    return (<Provider store={store}> ... </Provider>)
   }
  

• connect 使用
  • 导入
  • 调用
  • connect 方法会有一个返回值，而返回值就是加强之后的组件

   import { connect } from 'react-redux'
   connect(mapStateToProps,mapDispatchToProps) (Cpmponent)
  

  • connect 参数说明：
    • mapStateToProps(state,ownProps) ：函数类型；主要用来获取store中的数据
    • mapDispatchToProps(dispatch,ownProps)：函数类型；主要用于触发action
• 用 connect 方法 让组件 与 store 关联
  • 在 组件 A 和 组件 B 中分别导入 connect 方法
  • 利用 connect 方法对组件进行加强，并导出

     import { connect } from 'react-redux'
     connect(mapStateToProps,mapDispatchToProps) (CpmponentA)
     //例如 组件A 是发送方
     class ComA  extends React.Component{
        handleClick = () => {
        this.props.sendAction()
       }
          render(){
           return <button onClick={this.handleClick}> + </button>
          }
       }
    const mapDispatchToProps = dispatch => {
     return {
       sendAction: () => {
        dispatch({
           type: 'add_action'
         })
       }
      }
    }
    export default connect(null,mapDispatchToProps) (ComA)
    //例如 组件B 是接收方
      class ComB  extends React.Component{
          render(){
           return <div>{this.props.count} </div>
          }
       }
    const mapStateToProps = state => {
       return state
      }
    }
    export default connect(mapStateToProps) (ComB)
    

react-redux 原理图