开发小程序需要多少钱_记载一篇关于redux

记录一篇关于redux-saga的基本使用过程       这篇文章主要介绍了记录一篇redux-saga的基本使用过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
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'

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('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';

poseEnhancers = 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.pro凡科抠图
 return {
 div 
 div 
 test1的值为:{test1}
 /div 
 div 
 test2的值为:{test2}
 button setTest2Action('abc')} 设置test2的值为 abc /button 
 /div 
 div 
 test3的值为:{test3}
 button setTest3Action()} 从网络获取test3的值 /button 
 /div 
 /div 
const mapStateToPro凡科抠图 = ({test}) = {
 const {test1,test2,test3} = test;
 return {test1,test2,test3}
export default connect (mapStateToPro凡科抠图,{setTest2Action, setTest3Action})(Test)

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

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


相关阅读