用 configureStore 替换 createStore

Question

我更新了我的包，VScode 告诉我 createStore 已贬值。所以我着手更换它

我的商店文件，我在底部包含了原始行作为注释

import { configureStore } from '@reduxjs/toolkit';
import { Action, createStore } from 'redux'

export type State = { context: AudioContext | null}

export const START_AUDIO = "startAudio";

const initialState = {context: null}
  
const reducer = (state: State = initialState, action: Action<String>) => {
    switch (action.type) {
        case START_AUDIO:
            if (state.context == null) {
                return {
                    ...state,
                    context: new AudioContext()
                }
            }
    }
    return state
}

export const Store = configureStore({reducer})
// export const Store = createStore(reducer)

使用 redux

export function AudioContext() {
    const dispatch = useDispatch<Dispatch<Action<String>>>();
    const context = useSelector((state: State) => state.context)
    return (
        <button disabled={(context == null) ? false : true} onClick={() => dispatch({type: START_AUDIO}) }>Start Audio Context</button>
    )
}

应用组件

import '../styles/globals.css'
import Head from 'next/head'
import { Store } from '../code/util/store/store'
import { Provider } from 'react-redux'
import { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (<>
    <Head>
      <title>Test App</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <Provider store={Store}>
      <Component {...pageProps} />
    </Provider>
  </>)
}

使用 configureStore() 控制台给了我一个 warning about putting non-serizible objects in state。他们说这是可能的，但是当我尝试使用它时，我收到 Maximum call stack size 错误。

我已经尝试删除 redux 状态对象的其他用途（除了设置它），但我仍然遇到这两个错误，我还尝试使用字符串，这删除了警告和错误。因此，无论出于何种原因，似乎不再支持在状态中使用 AudioContext。

我做错了吗？我应该为此停止使用 Redux 吗？我还能如何实现这一目标？

我找到了这个 issue on github 然而，根据我的 node_modules im 运行 7.18.0 of @babel/core

Answer 1

一般来说，Redux 是一个状态管理工具——状态的意思很简单：数据。通常该数据应表示为普通 JavaScript 对象或数组，而不是 class 实例。

你在这里做的更多是一个“依赖注入”用例：你有一个特定的 class 提供的功能，你想传递给子组件。

在这种情况下，我建议您使用 React Context，因为 Context 是一种依赖注入机制（但不太适合状态值传播 - 但首先您不想在这里做任何事情）。

用 configureStore 替换 createStore

replacing createStore with configureStore

javascript

reactjs

redux

react-redux

next.js