NextJS-集成Redux

First
安装相应依赖

yarn add redux react-redux

Second
创建Redux目录结构

nextProject
    +- .next
    +- node_modules
    +- pages
    +- redux
        +- actions
        +- reducers

DEMO
redux/actions/userAction.js

export const LOGOUT = 'LOGOUT';

// action creactors
export const logout = () => ({
  type: LOGOUT,
});

redux/reducers/userReducer.js

import { LOGOUT } from '../actions/userAction';
export const defaultUserState = { name: 'testName' };
const UserReducer = (state = defaultUserState, action) => {
  switch (action.type) {
    case LOGOUT:
      return {};
    default:
      return state;
  }
};

export default UserReducer;

redux/reducers/index.js

import { combineReducers } from 'redux';
import userReducer from './userReducer';

const allReducers = combineReducers({
  user: userReducer,
});

export default allReducers;

redux/index.js

import { combineReducers } from 'redux';
import userReducer from './userReducer';

const allReducers = combineReducers({
  user: userReducer,
});

export default allReducers;

Third
在_app.js中引入

import App from 'next/app';
import { Provider } from 'react-redux';
import stores from '../stores';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <Provider store={stores}>
        <Component {...pageProps} />
      </Provider>
    );
  }
}

export default MyApp;

Fourth
use it

import { connect } from 'react-redux';
import { Button } from 'antd';
import { logout } from '../stores/actions/userAction';
function Home({ logout, user }) {
  return (
    <div>
      {user}
       <Button type="primary" onClick={logout}>
        test Redux
       </Button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  user: state.user.name,
});

const mapDispatchToProps = {
  logout,
};

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