Next-Redux-Wrapper не обновляет SSR Store - PullRequest
Новая
       30

Next-Redux-Wrapper не обновляет SSR Store

1 голос
/ 15 мая 2019

Я работаю над приложением, которое использует SSR.Он основан на React, Next и Redux.Я понимаю общую концепцию наличия хранилища на стороне клиента и хранилища на стороне сервера и их синхронизации друг с другом.

Я использую обертку next-redux, но не могу получить хранилище на стороне сервераподдерживать свое состояние.

_app.js 

// pages/_app.js
import React from 'react'
import {Provider} from "react-redux";
import App, {Container} from "next/app";
import withRedux from "next-redux-wrapper";
import makeStore from "../state/index.js";

class MyApp extends App {

    static async getInitialProps({Component, ctx}) {

        // we can dispatch from here too
        // ctx.store.dispatch({type: 'FOO', payload: 'foo'});

        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

        return {pageProps};

    }

    render() {
        const {Component, pageProps, store} = this.props;
        return (
            <Container>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </Container>
        );
    }

};

export default withRedux(makeStore, {debug: true})(MyApp)

state / redurs / index.js 

import { createStore } from 'redux'
import rootReducer from './reducers/index'

const makeStore = (initialState) => {
    return createStore(rootReducer, initialState);
};

export default makeStore;

и вот страница / index.js (логин) 

import React, { Component } from "react";
import Head from 'next/head';
import Input from '@material-ui/core/Input';
// import withRedux from 'next-redux-wrapper';
// import initStore from '../state/index.js';
import { connect } from "react-redux";

const mapStateToProps = state => ({
    // Login
    paypalCredentials: state.login.paypalCredentials
});

const mapDispatchToProps = dispatch => ({
    setPaypalCredentials: (payload) => dispatch({ type: 'SET_PAYPAL_CREDENTIALS', payload: payload })
})

class Login extends Component {

    static getInitialProps({store, isServer, pathname, query}) {
        // store.dispatch({type: 'FOO', payload: 'foo'}); // component will be able to read from store's state when rendered
        // return {custom: 'custom'}; // you can pass some custom props to component from here
    }

    shouldComponentUpdate(nextProps){
        // Redirect if Paypal Details are received (after login)
        if (nextProps.paypalCredentials !== this.props.paypalCredentials && nextProps.paypalCredentials !== null) {
            window.location.assign("/receipt");
            return false;
        } else {
            return true;
        }
    }

    reqPaypalCredentials = async() => {
        let res = await fetch("https://api.paypal.com/v1/oauth2/token?grant_type=client_credentials", {
                method: "POST",
                'headers': {
                    'Authorization': 'Basic QVFlY3ZXelNPSE05a3VZSE5WZ2p...confidential',
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }),
            data = await res.json();

        return data;
    }

    submitLogin = () => {
        console.log("SubmitLogin");
        (async() => {
            let data = null,
                resolvedData = null;
            try {
                data = this.reqPaypalCredentials();
                resolvedData = await data;
                this.props.setPaypalCredentials(resolvedData);
            } catch (err) {
                console.log("There was an error fetching the data: \n", error);
            }
        })();
    }

    forgotPassword = () => {

    }

    render(){
        return (
            <React.Fragment>
                <Head>
                    <meta charset="utf-8" />
                    <link rel="stylesheet" href="/static/css/global.css" />
                    <link rel="stylesheet" href="/static/css/login.css" />
                </Head>
                <div id="loginBg">
                    <div id="loginModal">
                        <div id="loginHeader">
                            <h2>Akauntu</h2>
                            <div id="loginLogo"></div>
                            <h2>Platform</h2>
                        </div>
                        <div id="loginContent">
                            <div>
                                <Input 
                                    autoFocus={true}
                                    placeholder="Email"
                                    required={true}
                                    type="email" 
                                />
                                <Input 
                                    placeholder="Password"
                                    required={true}
                                    type="password" 
                                />
                            </div>
                        </div>
                        <div id="loginFooter">
                            <h3 onClick={ this.submitLogin }>Login</h3>
                        </div>
                        <p onClick={ this.forgotPassword }>Forgot Password?</p>
                    </div>
                </div>
            </React.Fragment>
        )
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);
...