Javascript 下一个JS Redux不更新服务器存储_Javascript_Reactjs_Redux_Next.js

Javascript 下一个JS Redux不更新服务器存储

javascript reactjs redux next.js

Javascript 下一个JS Redux不更新服务器存储,javascript,reactjs,redux,next.js,Javascript,Reactjs,Redux,Next.js,我在Next JS中在客户端执行的Redux更新操作不会在服务器存储中更新你好。我有个问题。我正在用nextjs开发一个SSR应用程序。我已经用下一个redux包装器提供了下一个js链接。可以提供状态更新操作。我在服务器端进行的状态更新可以在客户端查看。我在客户端进行的redux更新也会出现在客户端，但当我刷新页面时，它会返回到以前的位置。示例场景：用户有地址。他们的地址可以从数据库中获取并打印在屏幕上。当我添加新地址或删除旧地址时，DB会更新。同时，它也会在客户端的存储中进行更新。到目前为

我在Next JS中在客户端执行的Redux更新操作不会在服务器存储中更新

你好。我有个问题。我正在用nextjs开发一个SSR应用程序。我已经用下一个redux包装器提供了下一个js链接。可以提供状态更新操作。我在服务器端进行的状态更新可以在客户端查看。我在客户端进行的redux更新也会出现在客户端，但当我刷新页面时，它会返回到以前的位置。示例场景：

用户有地址。他们的地址可以从数据库中获取并打印在屏幕上。当我添加新地址或删除旧地址时，DB会更新。同时，它也会在客户端的存储中进行更新。到目前为止没有问题。但是，当我刷新页面时，例如，如果更新前有4个地址，而我删除了其中一个，则刷新后，它将再次打印为4个地址。它一直这样，直到我再次从服务器获取数据

如何将客户端存储更新移动到服务器端，而不必反复向服务器发出请求

store.js

// store.js
import { createStore, applyMiddleware } from 'redux';
import { createWrapper } from "next-redux-wrapper";
import thunkMiddleware from 'redux-thunk'

//  ROOT REDUCERS
import rootReducer from "../reducers";

const bindMiddleware = (middleware) => {
    if (process.env.NODE_ENV !== 'production') {
        const { composeWithDevTools } = require('redux-devtools-extension')
        return composeWithDevTools(applyMiddleware(...middleware))
    }
    return applyMiddleware(...middleware)
}

const store_ = (initialState) => {
    return createStore(rootReducer, initialState, bindMiddleware([thunkMiddleware]));
}

const wrapper = createWrapper(store_/*, { debug: true }*/);

export {
    wrapper
}

_app.js

// _app.js
const MyApp = ({props, Component, pageProps }) => {
    const store = useStore();
    if (!store.getState().R_PageSettings.initStore)
    {
        store.dispatch({
            type: HYDRATE,
            payload: {
                ...props.initialState
            }
        })
    }
    return (
        <>
        <Head>
          <title>{ variables.meta.title }</title>
        </Head>
            <Component {...pageProps} />
        </>
    )
}

const wrappedApp = wrapper.withRedux(MyApp);

export default wrappedApp;

wrappedApp.getInitialProps = async ctx => {
    const data = await wrapper.getServerSideProps(
        async (req) => {
            const { store, ctx } = req;
            const reduxStates = store.getState();
            let user = reduxStates.R_User.user;
            if (!user)
            {
                const cookies = parseCookies(ctx);
                if (cookies.usr && user !== undefined)
                {
                    const getUser = await CustomersController.tokenLoginControl(cookies.usr);
                    if (getUser && getUser.status)
                    {
                        store.dispatch(setUserSSR(getUser.user))
                        user = getUser.user;
                    }
                    else
                        destroyCookie(ctx, 'usr');
                }
            }

            return {
                user
            }
        }
    )(ctx)

    return data;
}

addresspage.js

// addresspage.js
import { connect } from 'react-redux';
import { bindActionCreators } from "redux";

//  COMPONENTS
import UserPageLayout from "../UserPagesLayout";
import {
    CustomerAddressForm
} from "../../../components";

//  CONTROLLERS
import {
    CustomersController
} from "../../../controllers";

//  ACTIONS
import {
    setUser
} from "../../../actions";

const MyAddressPage = connect(({ R_User }) => {
    return {
        R_User
    }
}, dispatch => {
    return {
        setUser: bindActionCreators(setUser, dispatch)
    }
})((props) => {
    const addAddressHandle = () => {
        props.fullBarOpen(
            <CustomerAddressForm confirmHandle={async (address, setLoading) => {
                    const execute = await CustomersController.addAddress(address);
                    if (execute.status)
                    {
                        await props.setUser(execute.user);
                    }
                    else
                    {
                        setLoading(false);
                    }
                }}
            />
        );
    }

    return (
        <UserPageLayout>
        </UserPageLayout>
    );
})

export default MyAddressPage;

//addresspage.js
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
//组成部分
从“./UserPagesLayout”导入UserPageLayout；
进口{
CustomerAddressForm
}来自“../../../components”；
//控制器
进口{
客户控制器
}来自“../../../controllers”；
//行动
进口{
设置用户
}来自“../../../actions”；
const MyAddressPage=connect（{R\u User}）=>{
返回{
用户
}
}，分派=>{
返回{
setUser:bindActionCreators（setUser，dispatch）
}
})（（道具）=>{
常量addAddressHandle=（）=>{
道具(
{
const execute=wait CustomersController.addAddress（地址）；
if（execute.status）
{
等待props.setUser（execute.user）；
}
其他的
{
设置加载（假）；
}
}}
/>
);
}
返回(
);
})
导出默认MyAddressPage；

使用getServersideProps在服务器上预水合。您确定我的问题与此有关吗？我在app.js中使用getInitialProps设置默认的redux状态。然后我可以在客户端更新redux。但当我刷新页面时，它会返回到以前的状态。我要做的是在客户端有更新时刷新页面时保持有效。是否修复了它？使用getServersideProps在服务器上预水合。您确定我的问题与此相关吗？我在app.js中使用getInitialProps设置默认的redux状态。然后我可以在客户端更新redux。但当我刷新页面时，它会返回到以前的状态。我想做的是在客户端有更新时刷新页面时保持有效。您修复了吗？

// addresspage.js
import { connect } from 'react-redux';
import { bindActionCreators } from "redux";

//  COMPONENTS
import UserPageLayout from "../UserPagesLayout";
import {
    CustomerAddressForm
} from "../../../components";

//  CONTROLLERS
import {
    CustomersController
} from "../../../controllers";

//  ACTIONS
import {
    setUser
} from "../../../actions";

const MyAddressPage = connect(({ R_User }) => {
    return {
        R_User
    }
}, dispatch => {
    return {
        setUser: bindActionCreators(setUser, dispatch)
    }
})((props) => {
    const addAddressHandle = () => {
        props.fullBarOpen(
            <CustomerAddressForm confirmHandle={async (address, setLoading) => {
                    const execute = await CustomersController.addAddress(address);
                    if (execute.status)
                    {
                        await props.setUser(execute.user);
                    }
                    else
                    {
                        setLoading(false);
                    }
                }}
            />
        );
    }

    return (
        <UserPageLayout>
        </UserPageLayout>
    );
})

export default MyAddressPage;