在上篇文章中，基于react的nextjs处事端衬着框架学习使用
学习了解了一些关于nextjs的对象，并做了一个小demo，这篇文章将对上篇文章做一个增补，，在nextjs中引入redux

安置 // 安置redux相关依赖 yarn add redux redux-saga react-redux // 安置next.js对付redux的封装依赖包 yarn add next-redux-wrapper next-redux-saga yarn add redux react-redux 创建目录及文件

创建redux文件夹，并不才面创建index.js,actions,reducers,rootSaga.js文件

1、redux/index.js

初始化store

import { createStore, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga'; import rootSaga from './rootSaga'; import rootReducer from './reducers'; export function initializeStore(initialState){ // 创建一个 Saga middleware const sagaMiddleware = createSagaMiddleware(); // 使用 applyMiddleware 将 middleware 连接至 Store const store = createStore( rootReducer, initialState, applyMiddleware(sagaMiddleware) ); // 运行并监控各个action store.sagaTask = sagaMiddleware.run(rootSaga); return store }

2、redux/action-types.js

界说一些action常量

// 保举 export const GET_RECOMMEND_LIST = "GET_RECOMMEND_LIST"; // 获取App详情 export const GET_APP_INFO = "GET_APP_INFO";

3、redux/actions.js

import { createActions } from 'redux-actions' // 使用createActions创建多个行动 export const { getAppInfoRequest, getAppInfoSucceed, addAppInfoRequest, getPostsSucceed } = createActions({ GET_APP_INFO_REQUEST: id => { return id }, GET_POSTS_SUCCEED: res => { return res }, GET_APP_INFO_SUCCEED: res => { return res }, ADD_APP_INFO_REQUEST: data => { return data } })

4、redux/reducers.js
获取action传过来的数据存储到state中

import { handleActions } from "redux-actions"; import * as types from "./action-types"; // 默认state let defaultState = { searchList: [] //搜索功效列表 }; // 使用handleActions措置惩罚惩罚多个actions ，这里通过action.payload获取传过来的数据 const reducerCreators = handleActions( { [types.GET_APP_INFO_SUCCEED]: (state, action) => { return { ...state, appInfo: action.payload }; }, [types.GET_RECOMMEND_LIST_SUCCEEDED]: (state, action) => { return { ...state, recommendList: action.payload }; } }, defaultState ); export default reducerCreators;

5、redux/rootSaga.js

import { put, call, takeLatest, all } from 'redux-saga/effects' import { getAppInfoRequest, getAppInfoSucceed, addAppInfoRequest, getPostsSucceed } from './actions' import $api from '../api/index.js' import * as fetchApi from '../utils/fetcher' /** * * 获取app详情数据 * @param {*} action */ export function* getAppInfo(action) { try { const posts = yield call(fetchApi.getPosts) yield put(getPostsSucceed(posts)) } catch (error) { console.log(error) } } export function* addAppInfo(action) { console.log('action', action) console.log('addAppInfo process.browser', process.browser) } // 同时启动多个Sagas 监听action行动 export default function* rootSaga() { yield all([ // takeLatest(actionCreators.appSearch, appSearch), takeLatest(addAppInfoRequest, addAppInfo), takeLatest(getAppInfoRequest, getAppInfo) ]) } redux布局改革

从上面可以看到我们将所有的操纵actions、reducers和saga中，如果项目越来越大，就会变得难以维护。下面我们凭据差此外成果分袂创建差此外actions、reducers和sage文件
目录布局如下：

redux |----app |-----saga |---index.js |---appSaga.js |-----actions.js |-----reducers.js |-----selectors.js |----project index.js rootSaga.js

1、saga/index.js
这里主要是监听action行动，触发对应的saga要领

import { takeLatest, all } from 'redux-saga/effects' import { getAppInfoRequest, addAppInfoRequest } from '../actions' import { addAppInfoSaga, getAppInfoSaga } from './appSaga' // 同时启动多个Sagas 监听action行动 export function* appWatcher() { yield all([ takeLatest(addAppInfoRequest, addAppInfoSaga), takeLatest(getAppInfoRequest, getAppInfoSaga) ]) }

2、saga/appSaga.js
在saga中倡议接口请求，并将功效数据通知action生存在state中

import * as fetchApi from '../../../utils/fetcher' import { put, call } from 'redux-saga/effects' import { getPostsSucceed } from '../actions' /** * * 获取app详情数据 * @param {*} action */ export function* getAppInfoSaga(action) { // 通过action.payload获取数据 try { const posts = yield call(fetchApi.getPosts) yield put(getPostsSucceed(posts)) } catch (error) { console.log(error) } } export function* addAppInfoSaga(action) { console.log('action', action) console.log('addAppInfo process.browser', process.browser) }

3、app/actions.js
所有的actions行动在这里统一创建

import { createActions } from 'redux-actions' // 使用createActions创建多个行动 export const { getAppInfoRequest, getAppInfoSucceed, addAppInfoRequest, getPostsSucceed } = createActions({ GET_APP_INFO_REQUEST: id => { return id }, GET_POSTS_SUCCEED: res => { return res }, GET_APP_INFO_SUCCEED: res => { return res }, ADD_APP_INFO_REQUEST: data => { return data } })