0

我是下一个新手，几天以来一直在尝试为基于下一个类的组件设置样板代码并反应 redux。

到目前为止我尝试了什么

_app.js

import "../assets/css/generic.css";

import Nav from "../Components/Nav/Nav";
import { Provider } from "react-redux";

import thunk from "redux-thunk";
import { reduxSoldierMiddleware } from "redux-soldier";
import { createStore, applyMiddleware, compose } from "redux";
import { clientMiddleware } from "../redux/stores/middleware";
import reducers from "../redux/stores/index";

import withRedux from "next-redux-wrapper";

import "bootstrap/dist/css/bootstrap.min.css";

const logger = store => {
    return next => {
        return action => {
            const result = next(action);
            return result;
        };
    };
};

const composeEnhancers = compose;
const store = createStore(
    reducers,
    // window.REDUX_DATA,
    composeEnhancers(
        applyMiddleware(
            clientMiddleware(),
            thunk,
            reduxSoldierMiddleware,
            logger
        )
    )
);

function Layouts({ Component, pageProps }) {
    return (
        <Provider store={store}>
            <Nav />
            <Component {...pageProps} />
        </Provider>
    );
}

Layouts.getInitialProps = async ({ Component, ctx }) => {
    const pageProps = Component.getInitialProps
        ? await Component.getInitialProps(ctx)
        : {};

    //Anything returned here can be accessed by the client
    return { pageProps: pageProps };
};

const makeStore = () => store;

export default withRedux(makeStore)(Layouts);

index.js

import React, { Component, Fragment } from "react";
import { Container } from "react-bootstrap";

import { connect } from "react-redux";
import * as UniversitiesActions from "../redux/actions/UniversitiesActions";
import * as StatesListActions from "../redux/actions/StatesListActions";

import _ from "lodash";

class Home extends Component {
    async componentDidMount() {
        await this.props.loadUniversities();

        await this.props.loadStatesList();
    }

    render() {
        return (
            <Fragment>
                <div className="header_bg header_generic_bg">
                    <Container>
                        <h1>Find Universities and Courses in Australia</h1>
                        <p>
                            There are {this.props.universities.length}{" "}
                            universities in Australia
                        </p>
                        <div className="searchcourse"></div>
                    </Container>
                </div>
            </Fragment>
        );
    }
}

const mapStateToProps = state => {
    return {
        stateslist: state.statesliststore.stateslist,
        universities: state.universitiesstore.universities,
        isLoading: state.universitiesstore.isLoading
    };
};

const mapDispatchToProps = dispatch => {
    return {
        loadUniversities: () =>
            dispatch(UniversitiesActions.loadUniversities()),
        loadStatesList: () => dispatch(StatesListActions.loadStatesList())
    };
};

export const loadData = async (store, match) => {
    await store.dispatch(
        UniversitiesActions.loadUniversities(),
        StatesListActions.loadStatesList()
    );
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

与上面的代码一样，我在安装组件时加载大学和州数据。在查看页面源代码时，我没有看到服务器呈现的 html。

4

0 回答 0