React-5.3 Redux -- 使用react-redux

一. connect

1.安装

npm i react-redux

2.文件代码示例

1). store文件夹：创建空仓库

index.js – 总控仓库

import { createStore,combineReducers } from "redux";
import data from "./reducer";

// export default createStore(data);
export default createStore(combineReducers({data}));
//这里的例子就一个纯函数，所以使用combineReducers与否都可，当数据繁杂需要合并时使用

reducer.js – 管理员（如果多则可换成文件夹，最后合并并导出）

// 导出到 index.js/store 来建立一个空仓库

function data(state={
    name:'微信',
    age:10
},action){

    switch(action.type){
        case 'edit_name':
            return{
                ...state,
                name:action.name
            }
    }

    return state;
}

export default data;

2). index.js：与视图产生关联

• 在入口文件引入Provider，并把App包裹起来
• 然后记得传属性！！！传一个store的属性！！！

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

ReactDOM.render(
  // 记得传仓库！！！带上属性
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

3). App.js

import React from 'react';
import Inner from './Inner';

function App() {
  return (
    <div>
      哈哈
      <Inner info={"组件通信"} />
    </div>
  );
}
export default App;

4). 组件 inner.js（使用connect）

使用 connec：

• 目的：让组件拿到仓库里的数据 ！！！
• 在哪个组件中需要使用 redux 中的数据，就在哪个组件中调用
• connect ( state的处理函数 ) ( 组件 )
  • connect()()：connect()返回一个函数体(包含着数据)，后面加个括号继续调用，第二个括号里写要使用的组件
  • state的处理函数：(state,props)=>{ return state.data; }
    其中：state里的props为可选项 ，return的是要 传给组件 的 数据；

import React,{Fragment} from "react";
import { connect } from "react-redux";

function Inner(props){
    console.log(props); //接收不仅有传过来的数据，也包含有dispatch，修改方式！！！下面return state时，这里接收到{data:{...},dispatch:f}
	//解构出来：
    let {name,age,dispatch} = props;
    return(
        <Fragment>
            <p>name：{name}</p>
            <p>age：{age}</p>

            <button onClick={()=>{
                dispatch({
                    type:"edit_name",
                    name:"小朋友你是否有很多问号"
                })
            }}>修改</button>
        </Fragment>
    )
    
}

// 简单粗暴来讲：近似看作就是把仓库的数据，给第二个小括号内的组件
export default connect((state,props)=>{
    console.log(state); // {data:{ data:{name:"微信", age:10} }}
    return state.data; //这是固定写法，无论reducer.js里导出的名字是什么
})(Inner)
// 总结：
// 前面是一个回调函数，会把仓库的值返回出来；
// 然后返回在第二个函数执行的传入的这个组件当中，以此来达成一个目的，让组件拿到仓库里的数据
// 所以想让哪个组件拿到仓库里的数据，就让哪个组件传入进来

点击修改按钮：

二. hooks