刚学到 redux, 遇到一个问题

[blankmiss]

react 18 npm: lst 版本

{
  "name": "04_learn_redux",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-scripts": "5.0.1",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2",
    "web-vitals": "^2.1.4"
  }

我看文档上写的这个用 connect 高阶函数 用 mapStateToProps 去获取值传给组件 但是我打印了 props 是 {}

pages/about.jsx

import React, {PureComponent} from 'react';
import { connect } from  'react-redux'

export class About extends PureComponent {
    render() {
        console.log("about",this.props)
        const { counter } = this.props
        console.log("about",counter)  //控制台显示 about undefined
        return (
            <div>
                <h2> About Counter: {counter}</h2>
            </div>
        );
    }
}
// 传入 组件的 state 然后返回一个隐射关系 因为不是 store 里的所有数据我们都需要
const mapStateToProps = state => ({
    counter: state.counter
})
// connect 是一个高阶函数 调用方法为 connect(函数 1 ，函数 2)(组件)
export default connect(mapStateToProps)(About);

store/index.js

import {createStore} from "redux";
import reducer from "./reducer";

const store = createStore(reducer)
export default store

stote/reducer.js

import * as actionTypes from "./constants"

const initialState = {
  counter: 100
}

function reducer(state = initialState, action) {
  switch (action.type) {
    case actionTypes.ADD_NUMBER:
      return { ...state, counter: state.counter + action.num }
    case actionTypes.SUB_NUMBER:
      return { ...state, counter: state.counter - action.num }
    case actionTypes.CHANGE_BANNERS:
      return { ...state, banners: action.banners }
    case actionTypes.CHANGE_RECOMMENDS:
      return { ...state, recommends: action.recommends }
    default:
      return state
  }
}

export default reducer

index.js

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


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      {/* 包裹 最顶层 传入一个 store */}
      <Provider store={store}>
          <App/>
      </Provider>
  </React.StrictMode>
);

[ljtfdt]

import React, {PureComponent} from 'react';
import { connect } from 'react-redux'

// 导出 About
export class About extends PureComponent {
render() {
console.log("about",this.props)
const { counter } = this.props
console.log("about",counter) //控制台显示 about undefined
return (
<div>
<h2> About Counter: {counter}</h2>
</div>
);
}
}

const mapStateToProps = state => ({
counter: state.counter
})

// 默认导出
export default connect(mapStateToProps)(About);

这个组件中，有两个导出，你导入的时候是不是取错组件了？

[bojackhorseman]

如果是单项目中使用，我觉得不如用 jotai 之类的状态管理库，好写也好看，redux 写起来好复杂😹

[blankmiss]

@ljtfdt 这个好象是 说 es6 的导出格式吧 两种导入的方法 这个是 webstorm 的默认生成模版 应该不会有错

[blankmiss]

@bojackhorseman 按照路线学的 哈哈

[ljtfdt]

@blankmiss 但是你使用 About 组件的时候是怎么导入的？

[blankmiss]

app 里面直接引用的 store 有数据，about 组件里面用的 react-redux 的 connect 无数据

[ljtfdt]

@blankmiss 你在哪里使用了 About 组件

[blankmiss]

@ljtfdt import {About} from "./pages/About";

[blankmiss]

@ljtfdt 我改成 import About from "./pages/About"; 就可以了 这是为什么呢

[ljtfdt]

@blankmiss 你试试 import About from "./pages/About";

[ljtfdt]

@blankmiss import {About} from "./pages/About"; 这样导入的话 使用的是 export class About extends PureComponent 这里导出的，而不是经过 connect 高阶组件包裹的那个组件

[blankmiss]

@ljtfdt 懂了 可以理解为 我用的是原生的 about 组件 不是用的 connect 返回的新组件 谢谢你的帮忙

[Jaosn]

都 2023 年了，不推荐用

[MENGKE]

好几年没用过 redux 了，写起来太复杂太麻烦了，现在我都是用 zustand 之类的状态库

[dw2693734d]

什么年代了，不用 redux 了。直接自带的 use 系列就够了

[blankmiss]

@dw2693734d 因为才刚学 昨天才学到 hook

[snowma]

用 dva.js 吧