react学习

react 中redux和react-redux的使用

1. redux的作用

redux主要有 action，reduce 和store组成，是一个管理状态的库

• 通过调用action方法来更新reduer中的数据，一般分为两种，正常情况下返回的对象结构{type：，data}第一个参数type就是约定值，第二个参数data为改变的结果*，但异步时会返回1一个函数，但是需要中间键才可以起作用*

// 中间件：applyMiddleware  还需要thunk  yarn add redux-thunk 或者npm i redux-thunk
import {createStore,applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

• reducer 是专门用来初始化store的状态和加工状态的，但是需要多个reduce同时起作用需要将其为一个对象，redux已经为我们规定好格式

import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'

import person from "./reduces/person"
import count from "./reduces/count"
//组合多个reducer
let reducers = combineReducers({ person, count })

export default createStore(reducers, applyMiddleware(thunk))

• 完全使用redux时需要实时变化必须要要监听整个app是否变化store.subscribe(() => <App />)
• 通过store.subscribe(() => <App />)返回值注销监听
• store.dispatch 用来调用action方法
  使用react-redux
• 需要一个容器组件
• 需要一个ui组件
• 容器组件用来和redux直接交互
• ui组件只负责展示，没有任何redux操作，需要和容器组件用props交互
  
  下面是redux结构图
  
• actions 中count

 -import { ADD_COUNT } from '../constant'

export const addCount = (count) => ({ type: ADD_COUNT, data: count })

export const addAsync = (time, count) => {
    
    //异步action 需要返回一个函数
    return (dispatch) => {
        setTimeout(() => {
            console.log("---------");
            dispatch(addCount(count))
        }, time * 1000)
    }


}

• constant.js

export const ADD_COUNT="addCount"
export const ADD_PERSON="addPerson"
export const ADD_ASYNC="addAsync"

• redcer 的count

 import { ADD_COUNT } from "../constant"

const num = 0
export default function conut(preState = num, action) {
    let { type, data } = action
    switch (type) {
        case ADD_COUNT:
            return preState + data
             
        default:
            return preState
    }

}

• store.js

//中间件：applyMiddleware ,组合reducer：combineReducers
import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'

import person from "./reduces/person"
import count from "./reduces/count"
//组合多个reducer
let reducers = combineReducers({ count })

export default createStore(reducers, applyMiddleware(thunk))

• 容器组件部分

import React from 'react'
import { connect } from 'react-redux'
import { addCount,addAsync } from '../redux/actions/count'
import { Button } from 'antd';
function Count(props) {
    console.log(props);
    let { count, addCount,addAsync } = props

    const add = () => {
        addCount(1)
    }
    const addAsync1 = () => {
        addAsync(3,1)
    }
    return (
        <div>
            <div> 当前数字为：{count}</div>
            <Button onClick={add} >+1 </Button> &nbsp;
            <Button onClick={addAsync1} >异步加+1 </Button>
        </div>
    )
}

export default connect(
    //mapStateToprops  当多个参数时state => ({ count: state.count,person:state.person })
    state => ({ count: state.count }),
    //mapDispatchToprops
    { addCount,addAsync }
)(Count)

• connect 用于链接UI组件和redux的高阶函数，connect（mapStateToprops，mapDispatchToprops）(这里是用于链接的ui组价)
• mapStateToprops和mapDispatchToprops都是一个函数

//mapStateToProps
function mapStateToProps(state){
  return {count: state.count }
}

// mapDispatchToprops
function  mapDispatchToprops(dispatch){
 return {
   addCount:count=>dispatch(addCount(count)),
   addAsync:(time,count)=>dispatch(addAsync(time,count)),
 }
}

• app.jsx

import { Fragment } from 'react'
import Count from './container/Count'
function App() {
  return (
    <Fragment>
      <Count></Count>
    </Fragment>
  );
}

export default App;

• index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ConfigProvider } from 'antd';

import zhCN from 'antd/lib/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
// import 'antd/dist/antd.css';
// import "./assets/style/app.less"
import { Provider } from 'react-redux'

import store from './redux/store'
moment.locale('zh-cn');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ConfigProvider locale={zhCN}>
      {/* 所有的app的子孙后代容器组件都能使用store */}
      <Provider store={store} >
        <App />
      </Provider>

    </ConfigProvider>

  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

https://www.bilibili.com/video/BV1wy4y1D7JT?p=106
学习网站