安装

npm install --save reduxnpm install --save redux-saga

配置action

actionType

创建文件src/actions/types.js，在types.js文件中添加需要的action类型

export const TEST1_ACTION = 'test1';export const SET_TEST2_ACTION = 'change_test2';export const SET_TEST3_ACTION = 'change_test3';

createActions

创建文件src/actions/test.js，在test.js文件中编写action

import {TEST1_ACTION, SET_TEST2_ACTION, SET_TEST3_ACTION} from './types// 获取test1的值export const getTest1Action = () => { return { type:TEST1_ACTION }}// 写入test2的值export const setTest2Action = (testValue) => { return { type:SET_TEST2_ACTION, payload:testValue }}// 写入test3的值export const setTest3Action = (payload) => { return { type:SET_TEST3_ACTION, payload }}

配置reducer

因为一个项目中可能会有很多地方需要用到reducer，所以把这些reducer文件分开管理比较好，比如：test.js,settings.js,auth.js等等。

创建文件src/reducers/test.js，编写test reducer

import {TEST1_ACTION, SET_TEST2_ACTION, SET_TEST3_ACTION} from '../actions/types// 初始化const initTest = { test1:'这是test1初始化的值', test2:'这是test2初始化的值', test3:'这是test3初始化的值'}export default (state = initTest, action) =>{ switch (action.type) { case TEST1_ACTION:{ return { ...state } } case SET_TEST2_ACTION:{ return { ...state, test2:action.payload } } case SET_TEST3_ACTION:{ return { ...state, test3:action.payload.testValue } } default: return state }}

创建文件src/reducers/index.js

import {combineReducers} from 'redux'import test from './test'const reducers = combineReducers({ test, });export default reducers;

配置saga

创建文件src/sagas/test.js

import {all,fork,put,takeEvery} from 'redux-saga/effects'import {setTest2Action, setTest3Action} from "../actions/test"import {SET_TEST2_ACTION, SET_TEST3_ACTION} from "../actions/actionTypes"import axios from 'axios'function* changeTest2 (testValue) { yield put(setTest2Action(testValue))}function* changeTest3 (obj) { try{ // 这里使用axios从网络获取数据演示，没有安装axios的需要先安装它。 // 期间响应状态码判断就省略了，就当它每次请求都成功获得testValue的数据 response = axios.get('http://localhost/api/test') // 假设response.data里面有一个key为testValue的值 yield put(setTest3Action(response.data)) } catch (error) { console.error('这里也可以yield put一个createAction，这里不作演示') }}export function* setTest2 () { yield takeEvery(SET_TEST2_ACTION, changeTest2)}export function* setTest3 () { yield takeEvery(SET_TEST3_ACTION, changeTest3)}export default function* testSaga(){ yield all([ fork(setTest2), fork(setTest3), ])}

创建文件src/sagas/index.js

import {all} from 'redux-saga/effects';import testSaga from './test'export default function* rootSaga() { yield all([ testSaga() ]);}

配置store

import {applyMiddleware, compose, createStore} from 'redux';import reducers from '../reducers/index';import createSagaMiddleware from 'redux-saga';import rootSaga from '../sagas/index';const sagaMiddleware = createSagaMiddleware();// 使用数组是为了方便以后继续添加中间件const middlewares = [sagaMiddleware];const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;const store = createStore( reducers, composeEnhancers(applyMiddleware(...middlewares)));sagaMiddleware.run(rootSaga);export default store;

App入口文件路由配置

import React from 'react'import {Provider} from 'react-redux'import store from './store'import Test from './Test/'import {BrowserRouter, Route, Switch} from "react-router-dom"const MainApp = () => <Provider store={store}> <BrowserRouter> <Switch> <Route path="/" component={Test}/> </Switch> </BrowserRouter> </Provider>;export default MainApp

Test.js

src/Test/index.js

import React from 'react'import {connect} from 'react-redux'import {setTest2Action, setTest3Action} from '../actions/test'class Test extends React.Component { render() { const {test1, test2, test3, setTest2Action, setTest3Action} = this.props return { <div> <div> test1的值为：{test1} </div> <div> test2的值为：{test2} <button onClick={setTest2Action('abc')}>设置test2的值为 abc</button> </div> <div> test3的值为：{test3} <button onClick={setTest3Action()}>从网络获取test3的值</button> </div> </div> } }}const mapStateToProps = ({test}) => { const {test1,test2,test3} = test; return {test1,test2,test3}}export default connect (mapStateToProps,{setTest2Action, setTest3Action})(Test)

至此，即可运行 npm start进行测试了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。