时间戳

首页 > 解决方案 > 为什么在 redux 道具之前反应钩子初始化

reactjs - 为什么在 redux 道具之前反应钩子初始化

问题描述

这是某种代码，所以要温柔：D

我有一些页面使用 react hooks 和 redux 并且 redux 状态工作我检查了它加载数据。场景是我有一个从 redux thunk 加载输入框并使用 hooks 和 redux thunk 保存更改的页面

const MyComponent = (props) => {
    const { reduxProp } = props

    const [t1, setT1] = useState('')
    
    useEffect( () => {
        reduxActionLoadData // t1 , t2 data
        setT1(reduxProp.t1)
        setT2(reduxProp.t2)
    },[])

    return (
        <div>
           <input value={t1} onChange={ (e) => { setT1(e.target.value) } />
           <input value={t2} onChange={ (e) => { setT2(e.target.value) } />
        </div>
     )
}

const mapStateToProp = (state) => (
{
    reduxProp: state.reduxProp
})

const mapDispatchToProp = (dispatch) => (
{
    reduxActionLoadData = connectActionCreators(reduxActionLoadDataAction, dispatch)
})

export default const connect(mapStateToProps, mapDispatchToProps)(MyComponent)

当我检查它已加载的道具时，redux 状态也已加载，但是将 init 与空值挂钩我尝试使用 reduxProp.t1 初始化它们，reduxProp.t2 也没有运气，事情是当我运行应用程序时它工作正常但是当我刷新时当我运行应用程序时它失败的页面并且有时它也会失败我尝试使用加载状态并在加载后做一些事情=真没有运气

标签： reactjsreduxreact-hooks

解决方案

一方面，您mapDispatchToProp当前似乎没有做任何事情，因为=它将被解析为方法体，而不是对象 - 所以您根本没有连接您的操作。它应该看起来更像这样：

const mapDispatchToProp = (dispatch) => (
{
    reduxActionLoadData: connectActionCreators(reduxActionLoadDataAction, dispatch)
})

那么你应该使用地图对象表示法：

const mapDispatchToProp = {
    reduxActionLoadData: reduxActionLoadDataAction
}

并且您还必须在组件中实际使用它：

    useEffect( () => {
        props.reduxActionLoadData()
    },[])

这仍然会产生异步效果，因此reduxProp.t1不会立即改变。您可能需要稍后在单独的useEffect.

    useEffect( () => {
        setT1(reduxProp.t1)
    },[reduxProp.t1])

话虽如此，根本没有理由使用connect，因为您也可以使用useSelectoranduseDispatch钩子。connect是一个遗留 api，您实际上只需要与遗留类组件一起使用。

一般来说，我会假设你现在正在通过遵循一个过时的教程来学习一种非常过时的 Redux 风格。现代 Redux 不使用 switch..case reducers、ACTION_TYPE 常量、手写动作创建器、不可变的 reducer 逻辑或连接——它可能是旧式 Redux 代码的 1/4。请按照官方 Redux 教程了解现代 Redux。https://redux.js.org/tutorials/essentials/part-1-overview-concepts

推荐阅读