如何处理嵌套React Redux组件的操作分派

我正在为React Redux应用程序中的UI组件执行类似的操作：

// Outer.js
import Inner from './path'

export const Outer = () => {
    return (
        <div>
            ...
            <Inner />
            ...
        </div>
    )
}

为此步骤创建的我的操作：

action/index.js
export const Function = (param) => (dispatch, getState) => {
    dispatch({ type: 'FUNCTION', param })
}

我的减速机包括以下功能：

// reducer.js
export default reducer = (state="", action) => {
    switch(action.type) {
        case 'FUNCTION':
            return {
                ...state,
                param: action.param
            }
        ...
    }
}

我正在尝试从内部UI组件更新变量

paramToBeUpdated

的值。但它不起作用

内部

和

外部

组件能否共享与

外部

连接的容器组件

---

如何在不对当前设置进行太多更改的情况下执行此操作？是否可以避免创建一个新的内部容器，它基本上是外部容器的副本？

只有

Outer

连接到redux存储。 如果要从

内部调度操作，可以执行以下操作：

将内部连接到redux存储
//Inner.js
常量内部=（道具）=>{
返回(
{
道具功能（参数）
}}
/>
)
}
导出默认连接（空，mapDispatchToProps）（内部）

无需创建任何
InnerContainer

从
外部传递调度功能（+无需集装箱）

//Outer.js
从“/path”导入内部
导出常量外部=（道具）=>{
返回(
...
...
)
}
常量mapStateToProps=（状态）=>{
参数更新：？？？
}
常量mapStateToProps=（调度）=>{
功能：（参数）=>调度（功能（参数））
}
导出默认连接（mapStateToProps、mapDispatchToProps）（外部）

//Inner.js
常量内部=（道具）=>{
返回(
{
道具功能（参数）
}}
/>
)
}
如果无法将INTERNAR与状态值和/或操作连接起来，那么您一定是做错了什么，下面是一个工作示例：


const{Provider，connect}=ReactRedux；
const{createStore，applyMiddleware，compose}=Redux；
const{product}=immer；
常量初始状态={
值：“”，
};
//动作类型
const CHANGE='CHANGE'；
//动作创造者
常量更改=（值）=>({
类型：更改，
有效载荷：值，
});
const reducer=（状态，{type，payload}）=>{
如果（类型===更改）{
返回产品（状态，（草稿）=>{
draft.value=有效载荷；
});
}
返回状态；
};
//使用redux开发工具创建存储
康斯特康塞恩汉斯酒店=
窗口。uuu REDUX_vtools_uextension_uuucompose_uu124; COMPOSE；
const store=createStore(
减速器，
初始状态，
复合致癌物(
applyMiddleware（（）=>（下一步）=>（操作）=>
下一步（行动）
)
)
);
//组成部分
常量内部=连接（（状态）=>state.value{
功能：改变，
})（（{函数，值}）=>{
返回(
函数（e.target.value）}
/>
);
});
常量外部=（）=>{
返回(
);
};
ReactDOM.render(
,
document.getElementById（'root'））
);

我尝试在我的应用程序中添加了一个
mapDispatchToProps
方法到Inner.js，并通过
props
传递函数。但我仍然得到相同的错误，函数（或props.Function）在内部不存在。我不知道如何使函数在内部可见。谢谢你的回答！结果证明，在传递param时，我没有使用
e.target.value
，也忘记了返回
函数
。目前，我在将输入值绑定为有效负载时遇到了一些问题，因为我实际上使用的是material ui lab中的自动完成文本字段，而不是普通的输入字段。你对此有什么建议吗？顺便问一下，我不明白你的applyMiddleware（）里面有什么。介意解释一下那里发生了什么吗？@Young这是一个什么都不做的
store=>next=>action
。我有时会使用代码来演示thunk，这样我就可以用
store=>next=>action=>typeof action==“function”？action（store.dispatch，store.getState）：next（action）
action/index.js
export const Function = (param) => (dispatch, getState) => {
    dispatch({ type: 'FUNCTION', param })
}

// reducer.js
export default reducer = (state="", action) => {
    switch(action.type) {
        case 'FUNCTION':
            return {
                ...state,
                param: action.param
            }
        ...
    }
}