React-Redux初学习

react-redux：

1、不属于redux核心库

2、解决redux 使用时的代码的重用

3、将UI组件中的业务数据进行抽离

react-redux: 提供两个对象

1、Provider: 提供 store 属性 捆绑的就是 redux 中 store 对象

2、connect: 是一个函数对象  返回值：封装之后的组件对象

connect(

  p1, p2

)(目标组件);

p1: 函数对象 将store 中的state 对象中属性映射到组件的props属性中

p1参数：

store 中的state 对象

const mapStateToProps = state => {

   return ({

     映射到组件props对象中的属性: state.属性

   })

}

p2: 函数对象 将 调用dispatch 方法 直接映射到 组件的props属性中

p2参数

store 中的dispatch函数对象

const mapDispatchToProps = dispatch => {

  return ({

    映射到组件props对象中的方法名(形参){

      dispatch(action);

    }

  })

}

问题

• 在多模块文件的React应用中，如果在根模块中创建 Redux store，然后通过props依次传递给所有的子组件，实在太麻烦了

方案

• react-redux模块可用于使用了Redux的React项目中，提供了两方面的扩展功能

  • ① 一个“Context.Provider”：为它所包含的所有子组件提供store使用
  • ② 一个HOC高阶组件函数：connect()函数将自定义组件提升为“高阶组件”，将Redux的dispatch和state映射为被包装组件的props

步骤

• ① 安装依赖模块 npm i redux react-redux
• ② 顶级组件中创建 store 和 reducer，使用Provider为子组件共享store
• ③ 将store.dispatch()映射为子组件的props
• ④ 将store.getState()映射为子组件的props

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import CartModify from './components/CartModify';
import CartShow from './components/CartShow';
// 1.state
let initState = {
  byCount: 1
}
// 2.action
​
// 3.reducer
function appReducer(state, action) {
  switch (action.type) {
    case 'ENCREASE':
      return { ...state, byCount: state.byCount + 1 }
    case 'DECREASE':
      return { ...state, byCount: state.byCount - 1 }
​
    default:
      return initState
  }
}
// 4.store
let store = createStore(appReducer)
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <CartShow />
    <hr />
    <CartModify />
  </Provider>
);

CartShow.js:

import React from 'react'
import { connect } from 'react-redux';
function CartShow(props) {
    console.log('props1', props);
    return (
        <div>当前购物车中的购买数量:{props.bc}</div>
    )
}
function mapStateToProps(state) {
    console.log('state1', state);
    return {
        bc: state.buyCount
    }
}
export default connect(mapStateToProps, null)(CartShow)

CartModify.js:

import React from 'react'
import { connect } from 'react-redux';
function CartModify(props) {
    console.log(props);
    return (
        <div>
            <button onClick={props.dec}>-</button>
            <button onClick={props.enc}>+</button>
        </div>
    )
}
function mapDispatchToProps(dispatch) {
    return {
        enc: () => {
            dispatch({ type: 'ENCREASE' })
        },
        dec: () => {
            dispatch({ type: 'DECREASE' })
        }
    }
}
export default connect(null, mapDispatchToProps)(CartModify)