使反应组分“反应性”

Question

我有以下问题:我制作了一个减轻switch (){ case 1: case 2:}行为的组件。我希望我的组成部分对国家的变化作出“反应”。我用的是Redux。事情是这样的：

// Switch component
import { Fragment } from 'react'

export const Switch = props => {
    const children = Array.isArray(props.children) ? props.children : [props.children];
    return children.find(child => child?.props.case === props.condition);
}

export const Case = props => {
    return <Fragment>{props.children}</Fragment>;
}

更远的视图或任何其他组件..。

// Main.js
export const Main = () => {
    const currentView = useSelector(state => state.currentView);

    return (
            <Fragment>
                    <Switch condition={currentView}>
                        <Case case="view-1">
                            <StartScreen />
                        </Case>
                        <Case case="view-2">
                            <EndScreen />
                        </Case>
                        <Case case="view-3">
                            <OtherScreen />
                        </Case>
                    </Switch>
            </Fragment>
    );
};

提供商店

import React from 'preact/compat'
import {Provider} from 'react-redux';
import {store} from './actions/store';
import {Main} from './components/Main';

export const App = () => {
    return (
        <React.StrictMode>
            <Provider store={store}>
                <Main />
            </Provider>
        </React.StrictMode>
    );
}

Store.js -创建商店

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {reducer} from '../reducer/reducer';

const middlewares = [
    thunk,
];

export const getCustomStore = (customState) =>
    createStore(reducer, customState, applyMiddleware(...middlewares));

export const store = getCustomStore({});

// This dispatch should only be used outside the preact scope.
// When inside a preact component use "useCustomDispatch()" instead.
export const dispatch = async (...params) => store.dispatch(...params);

减速器

import { INITIAL_STATE } from '../constants/INITIAL_STATE';
import { stateModifiers } from '../actions/stateModifiers';

const modifiers = {
    ...stateModifiers,
};

export const createReducer = (initialState) =>
    (state = initialState, action) =>
        modifiers?.[action.type]?.(state, action);

export const reducer = createReducer(INITIAL_STATE);

我遇到的主要问题是，当currentView在状态中发生变化时，这个组件不会对更改做出反应。它只在初始负载下工作。在这方面的任何帮助都将受到高度赞赏，各位:)

Answer 1

我只是通过传递属性并在开关组件中使用状态选择来解决这个问题：

// Switch
import { useSelector } from 'react-redux'
import { Fragment } from 'react'

export const Switch = props => {
    const children = Array.isArray(props.children) ? props.children : [props.children];
    const property = useSelector(state => state[props.condition])
    const matcher = property ?? props.condition;
    return children.find(child => child?.props.case === matcher);
}

export const Case = props => {
    return <Fragment>{props.children}</Fragment>;
}

我刚刚带来了状态，通过检查，条件是否与状态中的属性相匹配。另外，我假设如果property是undefined，那么条件应该与提供的字符串相匹配，尽管道具会检查状态。