When I add a file using redux-wrapper, next throws this error.
_app.tsx:
<code>import React, {FC} from 'react';
import {Provider} from 'react-redux';
import {AppProps} from 'next/app';
import { wrapper } from '@/store';
const MyApp: FC<AppProps> = ({Component, ...rest}) => {
const {store, props} = wrapper.useWrappedStore(rest);
return (
<Provider store={store}>
<Component {...props.pageProps} />
</Provider>
);
};
</code>
<code>import React, {FC} from 'react';
import {Provider} from 'react-redux';
import {AppProps} from 'next/app';
import { wrapper } from '@/store';
const MyApp: FC<AppProps> = ({Component, ...rest}) => {
const {store, props} = wrapper.useWrappedStore(rest);
return (
<Provider store={store}>
<Component {...props.pageProps} />
</Provider>
);
};
</code>
import React, {FC} from 'react';
import {Provider} from 'react-redux';
import {AppProps} from 'next/app';
import { wrapper } from '@/store';
const MyApp: FC<AppProps> = ({Component, ...rest}) => {
const {store, props} = wrapper.useWrappedStore(rest);
return (
<Provider store={store}>
<Component {...props.pageProps} />
</Provider>
);
};
reducer:
<code>import {combineReducers} from 'redux'
import { playerReducer } from './playerReducer'
import {HYDRATE} from 'next-redux-wrapper';
const rootReducer = combineReducers({
player: playerReducer
})
export const reducer = (state: any, action: any) => {
if (action.type === HYDRATE) {
const nextState = {
...state, // use previous state
...action.payload, // apply delta from hydration
};
if (state.count) nextState.count = state.count; // preserve count value on client side navigation
return nextState;
} else {
return rootReducer(state, action);
}
};
export type RootState = ReturnType<typeof rootReducer>
</code>
<code>import {combineReducers} from 'redux'
import { playerReducer } from './playerReducer'
import {HYDRATE} from 'next-redux-wrapper';
const rootReducer = combineReducers({
player: playerReducer
})
export const reducer = (state: any, action: any) => {
if (action.type === HYDRATE) {
const nextState = {
...state, // use previous state
...action.payload, // apply delta from hydration
};
if (state.count) nextState.count = state.count; // preserve count value on client side navigation
return nextState;
} else {
return rootReducer(state, action);
}
};
export type RootState = ReturnType<typeof rootReducer>
</code>
import {combineReducers} from 'redux'
import { playerReducer } from './playerReducer'
import {HYDRATE} from 'next-redux-wrapper';
const rootReducer = combineReducers({
player: playerReducer
})
export const reducer = (state: any, action: any) => {
if (action.type === HYDRATE) {
const nextState = {
...state, // use previous state
...action.payload, // apply delta from hydration
};
if (state.count) nextState.count = state.count; // preserve count value on client side navigation
return nextState;
} else {
return rootReducer(state, action);
}
};
export type RootState = ReturnType<typeof rootReducer>
Store:
<code>import { Context, createWrapper } from "next-redux-wrapper";
import { Store, createStore } from "redux";
import { RootState, reducer } from "./reducers";
const makeStore = (context: Context) => createStore(reducer);
export const wrapper = createWrapper<Store<RootState>>(makeStore, {debug: true});
</code>
<code>import { Context, createWrapper } from "next-redux-wrapper";
import { Store, createStore } from "redux";
import { RootState, reducer } from "./reducers";
const makeStore = (context: Context) => createStore(reducer);
export const wrapper = createWrapper<Store<RootState>>(makeStore, {debug: true});
</code>
import { Context, createWrapper } from "next-redux-wrapper";
import { Store, createStore } from "redux";
import { RootState, reducer } from "./reducers";
const makeStore = (context: Context) => createStore(reducer);
export const wrapper = createWrapper<Store<RootState>>(makeStore, {debug: true});
useActions:
<code>import { useDispatch } from "react-redux"
import { bindActionCreators } from "redux"
import actionsCreators from "@/store/actions-creators"
export const useActions = () => {
const dispatch = useDispatch()
return bindActionCreators(actionsCreators, dispatch)
}
</code>
<code>import { useDispatch } from "react-redux"
import { bindActionCreators } from "redux"
import actionsCreators from "@/store/actions-creators"
export const useActions = () => {
const dispatch = useDispatch()
return bindActionCreators(actionsCreators, dispatch)
}
</code>
import { useDispatch } from "react-redux"
import { bindActionCreators } from "redux"
import actionsCreators from "@/store/actions-creators"
export const useActions = () => {
const dispatch = useDispatch()
return bindActionCreators(actionsCreators, dispatch)
}
When I removed the Player.tsx file from the layout the error disappeared
I’m using next-redux-wrapper
When I remove the useAction hook the error disappears
New contributor
Роман is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.