react中redux怎么使用 - chccee

react中redux怎么使用

function  reducer( state={age:10,name:'lisa' },actions){
        switch(action.type){
            case "add":
                return {...state,  age:state.age+1 };
            case "reduce":
                return { age:state.age-1 }
            default:
                return state
        }
    }

# NPM
npm install redux

# Yarn
yarn add redux

//创建仓库

import {createStore} from 'redux'


// createStore=>创建仓库
//语法
 //let store = createStore(reducer,中间件)


 // reducer =>  自己定义

 // 1他是一个函数
 // 2参数1 仓库中的数据   参数2 行为 actions
 // 3这个reduer 返回值 就是最新的仓库中的数据 
 // 4redcuer =》就是在reducer中定义方法修改数据 =》vuex mutations


 function reducer(state={age:10},actions){
      switch(actions.type){
        case "add":
            console.log('add',state);
            return {age:state.age+1};
         default :
         return state
      }
 }

 let store = createStore(reducer)


/**
 * 
 * @@observable: ƒ observable()  观察仓库中的数据
dispatch: ƒ dispatch(action)  =》触发reducer
getState: ƒ getState()  =>获取到仓库中的数据
replaceReducer: ƒ replaceReducer(nextReducer)  替换reducer
subscribe: ƒ subscribe(listener)  订阅
 * 
 * 
 * 
 * **/

   export default store

import logo from './logo.svg';
import './App.css';
// 在组件中引入仓库
import store from './store/index'
import {useState} from 'react'

function App() {
 // 1获取到仓库中的数据
  // console.log(store.getState());
  // let age = store.getState().age
  let [age,setAge] = useState(store.getState().age)

  const changeAge = ()=>{
     //触发 reducer
     store.dispatch({type:'add'})
    //  问题=》仓库中的数据更新了=》但是视图没有更新 =》组件没有更新
    // 1 讲这个数据=》动态数据
    // setAge(仓库中的最新数据) =>和仓库进行关联
    setAge(store.getState().age)
  }
  return (
    <div className="App">
       <h2>我的年龄{age}</h2>
       <button onClick={()=>changeAge()}>修改仓库选中数据</button>
    </div>
  );
}

export default App;

//  合拼reducer

import {combineReducers} from 'redux'

// combineReducers
import CartReducer from './CartReducer'
import meReducer from './meReducer'
//作用：合拼reducer
//语法： let reducers = combineReducers({属性：各自的reducer,属性：各自的reducer})


let reducers = combineReducers({
    CartReducer,
    meReducer
})

export default reducers

/* 
    combineReducer
        作用： 合并 reducer 数据实现模块化
        语法：let reducers=combineReducers({属性:各自的reducer, 属性:各自的reducer})
*/

// 工程化处理Reducer 合拼

import { combineReducers } from "redux";

// combineReducers
import CartReducer from "./CartReducer";
import MeReducer from "./MeReducer";
// 在这里引入各自的reducer
// 处理方法 =》 自动引入reducer 自动合拼reducer

// 1 在reducers文件夹下创建一个 reducer 文件 =》 再给我 合拼成reducer

// 1 webpack =》 require.context =》自动获取到文件中的暴露内容

// 语法：require.context('文件路径'，布尔值，正则)
// requeire.context('文件路径'，布尔值，正则)  => 返回值  （是webpack）实例方式

// 两个方法 1. webf.keys()=>['文件路径'，布尔值，正则]
// 2.获取到它的内容 webf(路径).default

let webf = require.context("./", true, /\.js/);
let webfList = webf.keys();
// console.log(webfList);
// 删除自身 index.js
let index=webfList.findIndex((item,index)=>{
    return item=='./index.js'
})
webfList.splice(index,1)
// console.log(webfList);

// 将webfList合并成一个对象
let objs={};
webfList.forEach((item,index)=>{// 文件路径     ./ CartReducer .js
        // console.log(webf(item).default);
        // 处理属性 = item
        let items=item.replace('./','').replace('.js','')
        // console.log(items)
        objs[items]=webf(item).default
})
// console.log(objs)

// 作用：合并reducer
// 语法：let reducers=combineReducers({属性：各自的reducer,属性：各自的reducer})

let reducers = combineReducers(objs);

export default reducers;

/* 
    五：bindActionCreators

    bindActionCreators => 自动触发reducer => 你想要触发

    语法：let 对象 =bindActionCreators({属性：属性值是一个方法},dispatch)  属性值是一个方法=》 就是你的reducers中的方法


    使用： 
        1 实现reducer 和他的行为一一对应
        2 使用 bindActionCreators 来实现
            2.1 语法 bindActionsCreators({就是你的reducer 和 使用的行为对应},dispatch)

         全部触发我的模板中的reducer 行为
             1 我的模块reducer 有多少个行为
             2 我的模块中add
        
    */

import { bindActionCreators } from "redux";
import store from "../index";

// bindActionCreators => 自动触发reducer => 你想要触发
// 语法 let对象 =bindActionCreators({属性：属性值是一个方法}，dispatch)，属性值是一个方法 =》就是你的reducer中的方法

// 创建方法
let meAdd = () => {
  return {
    // 行为 =》 actions
    type: "add",
  };
};

let meSub = () => {
  return {
    type: "sub",
  };
};

let meActions = bindActionCreators({ meAdd, meSub }, store.dispatch);

export default meActions;

import logo from './logo.svg';
import './App.css';
//来到组件
import store from './store/index'
import {useState} from 'react'

//使用 自动派发
import meActions from './store/actions/meActions'

function App() {
 // 1获取到仓库中的数据
  console.log(store.getState());
  // let age = store.getState().meReducer.age
  let [age,setAge] = useState(store.getState().meReducer.age)

// 3引入我们这个自动派发的方法 =》直接使用
  const changeAge = ()=>{
      console.log( meActions);
    //  store.dispatch({type:'add'}) //触发reducer
    meActions.meAdd()
 
    setAge(store.getState().meReducer.age)
  }

  return (
    <div className="App">
       <h2>我的年龄{age}</h2>
       <button onClick={()=>changeAge()}>修改仓库选中数据</button>
    </div>
  );
}

export default App;

npm install react-redux

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    {/* 在父组件中提供数据 */}
    <App />
  </Provider>
);

/* 
   react-redux 作用
      提供 1 组件 =》 在子级组件提供仓库组件，在自己组件中获取到仓库数据
      2 hooks  

      useSelector => 得到仓库中的数据
      // 语法
      useDispatch 作用：可以获取到更新组件的dispatch；触发 reducer  =》 语法 useDispatch() => dispatch()
*/

// 使用
// 在自己组件中获取到仓库中的数据 =》 使用它提供的两个hooks
import {useSelector,useDispatch} from 'react-redux' 
// useSelector(state=>{返回值}) =》返回值  得到仓库中的数据
// useDispatch 触发redcuer =》 语法 useDispatch()=> 的返回值就是 dispatch()
      // 作用：获取到可以更新组件的dispatch

function App(){
  let age=useSelector(state=>{  // state是来自父组件的store数据
    return state.MeReducer.age
  })

  let dispatch=useDispatch() // 1 先触发reducer，获取到仓库中的数据，再通过useState修改数据方法，让数据更新
  console.log(age,'组件重新创建');

  return(
      <div>
          <h2>我的年龄{age}</h2>
          <button onClick={()=>{dispatch({type:'add'})}}>修改仓库</button>
      </div>
  )

}

export default App

/* 
  总结：react-redux
      作用：让仓库和react项目进行关联
            它为react项目提供了一个组件（Provider），两个hooks（useSelector、useDispatch）
      Provider: 在父级组件中提供数据，其他的自己组件就可以获取到
      useSelector：在组件获取到仓库中的数据
      useDispatch：先触发reducer，获取到仓库中的数据，再通过useState修改数据，让数据更新

*/

//我的模块中 异步处理
import axios from 'axios'
import store from '../index'
 // 定义异步处理方法

 //根据actions作用来进行定义 =》1 获取到异步数据   2 触发reducer

 //定义异步处理方法
 // 1 是一个方法
 // 2 获取到异步数据
 // 3 触发reducer   => store
  export  function   getAgeSub(){
       
     //1获取到异步数据
     function getData(){
        return  axios.get('').then(res=>{ //后端给的数据
              let a = 100
              return a
          })
     }

     // 2触发reducer
     return  async()=>{
          // 1获取到异步数据
        let data =   await getData()
        console.log(data);
          // 2 触发reducer =>将异步数据传递给 reducer
          console.log('触发reducer');
          store.dispatch({type:'add',data })
     }
 }

 // getAgeSub()

 //总结 定义actions 
 //1 获取到异步数据
 //2 触发reducer
 //3 知道执行的获取到异步数据，再 执行reducer

 //定义异步actions => 函数劫持
//高阶函数=》  1 这个函数的参数是一个函数  或者 这个函数的返回值是一个函数
 // 函数劫持 =》我在处理某个逻辑之前，要做一些操作，我们把这个方法叫做函数劫持

npm install redux-thunk

// 引入中间件
import {createStore,applyMiddleware} from 'redux'
import reducers from './reducers'
// 引入'redux-thunk'
import ReduxThunk from 'redux-thunk'



let store = createStore(reducers,applyMiddleware(ReduxThunk))
  //applyMiddleware(ReduxThunk) =>1处理组件中 dispatch（）这个方法内容可以写 方法 
  // 2 异步actions 返回的处理方法 的第一次参数就是dispatch


export default store

export  function   getAgeReduce(){
       
    //1获取到异步数据
    function getData(){
       return  axios.get('').then(res=>{ //后端给的数据
             let a = 100
             return a
         })
    }

    // 2触发reducer
    return  async(dispatch)=>{ //第一个参数 就是  dispatch
         // 1获取到异步数据
       let data =   await getData()
       console.log(data);
         // 2 触发reducer =>将异步数据传递给 reducer
         console.log('触发reducer');
      
        dispatch({type:'reduce',data })
    }
}