redux - 如何处理嵌套 React Redux 组件的 Action 调度

Question

我在 React Redux 应用程序中为我的 UI 组件做这样的事情:

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

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

// Inner.js
const param = ''
export const Inner = () => {
    return (
        <div>
            <TextField 
                input={param}
                onChange = {(param) => {
                    Function(param)
                }}
            />
        </div>
    )
}

我还为 Outer.js 设置了一个容器组件:

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

const mapStateToProps = (state) => {
    paramToBeUpdated: ???
}

const mapDispatchToProps = (dispatch) => {
    Function: (param) => dispatch(Function(param))
}

export default connect(mapStateToProps, mapDispatchToProps)(Outer)

我为此步骤创建的操作:

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

我的 reducer 包含以下功能:

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

我正在尝试从内部 UI 组件更新变量 paramToBeUpdated 的值。但它没有用。

Inner和Outer组件可以共享一个与Outer相连的容器组件吗？

在不对当前设置做太多更改的情况下，我应该怎么做？是否可以避免创建一个新的内部容器，它基本上是外部容器的副本？

Answer 1

如果您无法将 Inner 与状态值和/或操作联系起来，那么您一定做错了什么，这是一个有效的示例:

const { Provider, connect } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const { produce } = immer;

const initialState = {
  value: '',
};
//action types
const CHANGE = 'CHANGE';
//action creators

const change = (value) => ({
  type: CHANGE,
  payload: value,
});
const reducer = (state, { type, payload }) => {
  if (type === CHANGE) {
    return produce(state, (draft) => {
      draft.value = payload;
    });
  }
  return state;
};
//creating store with redux dev tools
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,
  initialState,
  composeEnhancers(
    applyMiddleware(() => (next) => (action) =>
      next(action)
    )
  )
);
//components
const Inner = connect((state) => state.value, {
  Function: change,
})(({ Function, value }) => {
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => Function(e.target.value)}
    />
  );
});

const Outer = () => {
  return (
    <div>
      <Inner />
    </div>
  );
};
ReactDOM.render(
  <Provider store={store}>
    <Outer />
  </Provider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<script src="https://unpkg.com/immer@7.0.5/dist/immer.umd.production.min.js"></script>
<div id="root"></div>