Question

我正在测试react-sweet-state作为Redux的替代方案，但是我感觉自己缺少一些东西。

这是我的商店的写法：

import { createStore, createHook } from 'react-sweet-state'

const initialState = {
    startHolidayButton: true,
}

const actions = {
    setStartHolidayButton: value => ({ setState }) => {
        setState({ startHolidayButton: value })
    },
}

const ButtonsVisibleStore = createStore({
    initialState,
    actions,
    name: 'ButtonsVisibleStore',
})

export const useButtonsVisible = createHook(ButtonsVisibleStore)

在我看来，这一切都还不错，只要我只需要初始状态，钩子就可以工作。这就是我访问和修改它的方式：

const App = () => {
    const [state, actions] = useButtonsVisible()
    return (
        <Styled>
            <MainMenu />
            <div className="l-opacity">
                <WorldMap />
            </div>

            {state.startHolidayButton && (
                <div
                    className="bottom-toolbar"
                    onClick={() => {
                        actions.setStartHolidayButton(false)
                    }}>
                    <StartSelectionButton />
                </div>
            )}
        </Styled>
    )
}

我可以从state中读取值，也可以触发actions，但是如果某个动作更新了状态值，则我的组件不会重新呈现，这就像他不知道有什么东西已更新。

那么我是用正确的方式做的还是不是为此目的采取的行动？

Answer 1

export default function App() {
  const [state, actions] = useButtonsVisible();
  return (
    <div className="App">
  {state.startHolidayButton ?
    (
      <div
        className="bottom-toolbar"
        onClick={() => {
          actions.setStartHolidayButton(false);
        }}
      >
        click me
      </div>
    )
    :
    (
        <div
          className="bottom-toolbar green"
          onClick={() => {
            actions.setStartHolidayButton(true);
          }}
        >
          click me
        </div>
    )
  }
</div>
);
}

通过一些更改，您的代码可以正常工作。这是CSS：.bottom-toolbar {display：inline-block;宽度：100％;高度：50px；背景：红色；光标：指针； } .bottom-toolbar.green {背景：绿色； }

https://codesandbox.io/s/elegant-mendeleev-o9zv7?file=/src/styles.css:58-218

状态更新后组件不会重新呈现

1 个答案: