react+redux大体思路（一）

最新推荐文章于 2022-01-15 18:25:54 发布
最新推荐文章于 2022-01-15 18:25:54 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qwbtc/article/details/52191467
版权

思路图基本是components->action->middlewave->server(response)->reducer(重组数据更新components)


具体实例：

app/host/components/mine/edit_details.js中：

import React, {Component} from 'react';
import {View, Text, Image, StyleSheet, ScrollView, Animated, Alert, TouchableOpacity, Dimensions} from 'react-native';

import _ from 'underscore'
import {I18n, S, COLOR} from '../../utils/tools'
import SegmentsGroup from '../common/segments_group'
import Segment from '../common/segment'
import LeftBarButton from '../common/navigatorBar/leftBarButton'
import NavigationBar from 'react-native-navbar'
import buildApiUrl from '../../../utils/build_api_url'
import SessionStore from '../../../stores/session_store'
import SessionActions from '../../../actions/session_actions'
import Picker from 'react-native-picker'
var ImagePickerManager = require('NativeModules').ImagePickerManager;

export default class EditDetail extends Component {

  static contextTypes = {
    page: React.PropTypes.object,
    app: React.PropTypes.object,
  };

  constructor(props) {
    super(props)

    const {users} = this.props.users
    let user = users[`${CURRENT_USER.id}`]

    this.state = {
        isUploading: false,
        profile_photo: user.profile_photo?user.profile_photo.medium_url:null,
        birth_date: user.birth_date
    }
  }

  componentDidMount() {

  }

  _onPressHandle(){
		this.picker.toggle();
	}

  render() {
    const {users} = this.props.users
    let user = users[`${CURRENT_USER.id}`]
    var array=user.languages||[]
    var languages = _.map(array,(element,index)=>{
      return(element)
    })
    let leftButtonConfig = <LeftBarButton onPress={() => {this.context.page.navigator.pop()}}/>
    return (
      <View style={[S.container, {backgroundColor: "#EFEFEF"}]}>
        <NavigationBar title={{title:I18n.t('my.edit_profile_tip')}} leftButton={leftButtonConfig}/>
        <ScrollView>
        <View style={styles.detailView}>
        <SegmentsGroup>
        {
          user.profile_photo&&this.state.profile_photo?(<Segment onPress={() => this._editHeadImage()}
            redTitle={true}
            value={I18n.t('my.edit_avatar')}
            iconImage={<Image source={{uri:this.state.profile_photo}} style={{width: 40, height: 40, borderRadius: 20}} />}
          />):(<Segment onPress={() => this._editHeadImage()}
              redTitle={true}
              value={I18n.t('my.edit_avatar')}
              iconImage={<Image source={require('../../../components/image/img/default_profile.png')} style={{width: 40, height: 40, borderRadius: 20}} />}
            />)
        }
          <Segment onPress={() => this._editName()}
            title={I18n.t('my.name')}
            value={user.full_name}
          />
          <Segment onPress={() => this._editSex()}
            title={I18n.t('my.gender')}
            value={user.gender}
          />
          <Segment onPress={()=>this._onPressHandle()}
            title={I18n.t('user.birth_date')}
            value={this.state.birth_date}
            rightIcon="none"
          />
          <Segment onPress={() => this._editCity()}
            title={I18n.t('my.city')}
            value={user.location}
          />
        </SegmentsGroup>
        <SegmentsGroup>
          <Segment onPress={() => this._editCollege()}
            title={I18n.t('my.learning')}
          />
          <Segment onPress={() => this._editJob()}
            title={I18n.t('my.occupation')}
          />
          <Segment onPress={() => this._editLanguage()}
            title={I18n.t('user.languages')}
            value={languages}
          />
        </SegmentsGroup>
        <SegmentsGroup>
          <Segment onPress={() => this._editYourself()}
            title={I18n.t('my.introduce_myself')}
        />
        </SegmentsGroup>
        </View>
        </ScrollView>
        {this._renderDatePicker()}
      </View>
    )
  }
  _renderDatePicker(){
    return (
			<Picker
				ref={picker => this.picker = picker}
				style={{height: 250}}
				showDuration={300}
				pickerData={createDateData()}
        pickerBtnText={I18n.t('house.completed')}
        pickerCancelBtnText={I18n.t('common.cancel')}
				selectedValue={['2015', '1', '1']}
				onPickerDone={(pickedValue) => {
        var birthDate =pickedValue.join('-')
          const {actions} = this.props
            actions.updateUser({
              data: {
                birth_date: birthDate
              },
              success: () => {
                this.setState({
                  birth_date: birthDate
                })
              }
            })
				}}
			/>
		)
  }

  _editHeadImage() {
    if (!this.state.isUploading) {
      var options = {
        title: I18n.t('photo.select'),
        cancelButtonTitle: I18n.t('common.cancel'),
        takePhotoButtonTitle: I18n.t('photo.take'),
        chooseFromLibraryButtonTitle: I18n.t('photo.choose'),
        cameraType: 'front', // 'front' or 'back'
        mediaType: 'photo', // 'photo' or 'video'
        videoQuality: 'high', // 'low', 'medium', or 'high'
        maxWidth: 1000, // photos only
        maxHeight: 1000, // photos only
        aspectX: 1, // android only - aspectX:aspectY, the cropping image's ratio of width to height
        aspectY: 1, // android only - aspectX:aspectY, the cropping image's ratio of width to height
        quality: 0.5, // 0 to 1, photos only
        angle: 0, // android only, photos only
        allowsEditing: true, // Built in functionality to resize/reposition the image after selection
        noData: false, // photos only - disables the base64 `data` field from being generated (greatly improves performance on large photos)
        storageOptions: { // if this key is provided, the image will get saved in the documents directory on ios, and the pictures directory on android (rather than a temporary directory)
          skipBackup: true, // ios only - image will NOT be backed up to icloud
          path: 'images' // ios only - will save image at /Documents/images rather than the root
        }
      }

      ImagePickerManager.showImagePicker(options, (response) => {
        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.error) {
          console.log('ImagePickerManager Error: ', response.error);
        } else {
          var source;
          source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};

          // uri (on iOS)
          if (IOS) {
            source = {uri: response.uri.replace('file://', ''), isStatic: true};
          }

          // uri (on android)
          if (ANDROID) {
            source = {uri: response.uri, isStatic: true};
          }

          __LOG.info(` source .... `)
          __LOG.info(` ${JSON.stringify(source)} `)

          this.uploadProfilePhoto(source);
        }
      })
    }
  }

  uploadProfilePhoto(asset) {
    var xhr = new XMLHttpRequest();
    var url = buildApiUrl({path: '/v1/profile/0.json'});
    xhr.open('PUT', url);

    var formdata = new FormData();
    formdata.append('profile_photo', {type: "image/jpeg", name: 'image.jpg', uri: asset.uri});

    if (xhr.upload) {
      xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
          this.setState({uploadProgress: event.loaded / event.total});
        }
      };
    }
    xhr.send(formdata);
    this.setState({
      isUploading: true,
      profile_photo: asset.uri
    })

    xhr.onload = () => {
      this.setState({isUploading: false});
      if (xhr.status !== 200) {
        Alert.alert(
          'Upload failed',
          'Expected HTTP 200 OK response, got ' + xhr.status
        );
        return;
      }
      var json = JSON.parse(xhr.responseText);
      var {data, meta} = json;
      const {actions} = this.props
      actions.updateUser({
        data: {
          user: data.user
        },
        success: () => {
        }
      })
    }
  }

  _editName(){
    this.context.page.navigator.push({
      id: "editName",
    })
  }

  _editSex(){
    this.context.page.navigator.push({
      id: "editSex",
    })
  }

  _editBirthday() {
    this.context.page.navigator.push({
      id: "editBirthDate",
    })
  }

  _editCity(){
    this.context.page.navigator.push({
      id: "editCity",
    })
  }

  _editCollege(){
    this.context.page.navigator.push({
      id: "editCollege",
    })
  }

  _editJob(){
    this.context.page.navigator.push({
      id: "editWork",
    })
  }

  _editLanguage(){
    this.context.page.navigator.push({
      id: "editLanguage",
    })
  }

  _editYourself(){
    this.context.page.navigator.push({
      id: "editYourself",
    })
  }
}

function createDateData(){
	let date = {};
	for(let i=1900;i<2021;i++){
		let month = {};
		for(let j = 1;j<13;j++){
			let day = [];
			if(j === 2){
				for(let k=1;k<29;k++){
					day.push(k);
				}
			}	else if (j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){
				for(let k=1;k<32;k++){
					day.push(k);
				}
			} else {
				for(let k=1;k<31;k++){
					day.push(k);
				}
			}
			month[j] = day;
		}
		date[i] = month;
	}
	return date;
}

const styles = StyleSheet.create({
   container: {
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    alignItems: 'center',
    justifyContent: 'center',
   },
   detailView: {
     marginTop: 10,
     marginLeft: 10,
     marginRight: 10,
   }
})
#####################上面代码解释######################

EditDetail为一整个组件（这个组建就相当于整个一个页面），

  static contextTypes = {
    page: React.PropTypes.object,
    app: React.PropTypes.object,
  };
这段是从最上层父组件带过来的变量也就是从 / app /modal_container .js这个文件中的 ModalContainer这个父组件中 

  childContextTypes: {
    app: React.PropTypes.object,
    page: React.PropTypes.object,
  },
这句继承而来的就是跳过很多组件直接从最父的组件集成 
  constructor(props) {
    super(props)

    const {users} = this.props.users
    let user = users[`${CURRENT_USER.id}`]

    this.state = {
        isUploading: false,
        profile_photo: user.profile_photo?user.profile_photo.medium_url:null,
        birth_date: user.birth_date
    }
  }
这段是继承来父级的props和对本级的state进行初始化赋值 
  componentDidMount() {

  }
这个函数是render执行完毕后进行的回调函数
render中就是对页面进行的渲染 
          <Segment onPress={() => this._editName()}
            title={I18n.t('my.name')}
            value={user.full_name}
          />
这句中this._edit_Name（）函数， 这个this指的是当前组建， 也就是当前组建中的_edit_Name()函数 
  _editName(){
    this.context.page.navigator.push({
      id: "editName",
    })
  }
这个函数这句this.context.page.navigator.push({id:"editName"})中前面到push意思是onPress这个动作触发这个_editName
()这个函数跳到id为“editName”这个组建中这个routes对应找editName这个组件的表在 / app / host / components / navigation / routes.js中 
    switch (route.id) {
      case 'host':
        return <ContextWrapper {...contextProps}><TabBarApp {...viewProps} /></ContextWrapper>
      case 'chat_list':
        return <ContextWrapper {...contextProps}><ChatList {...viewProps} /></ContextWrapper>
      case 'chat_message':
        return <ContextWrapper {...contextProps}><ChatMessage {...viewProps} /></ContextWrapper>
      case 'order_list':
        return <ContextWrapper {...contextProps}><OrderList {...viewProps} /></ContextWrapper>
      case 'house_list':
        return <ContextWrapper {...contextProps}><HouseList {...viewProps} /></ContextWrapper>
      case 'calendar_manage':
        return <ContextWrapper {...contextProps}><CalendarManage {...viewProps} /></ContextWrapper>
      case 'mine_home':
        return <ContextWrapper {...contextProps}><MineHome {...viewProps} /></ContextWrapper>
      case 'editPersonalDetails':
可以找到对应的组建（新建组建id和名字也要在这个routes中注册）
然后找到id是editName对应 host / components / mine / edit_name.js文件中的
export default class EditName extends Component
这个组建， 则点push，也就是跳转到前面的页面是EditName这个组建渲染的页面 

import React, {Component} from 'react';
import {View, Text, Image, StyleSheet, ScrollView, TextInput} from 'react-native';

import {I18n, S, COLOR} from '../../utils/tools'
import SegmentsGroup from '../common/segments_group'
import Segment from '../common/segment'
import LeftBarButton from '../common/navigatorBar/leftBarButton'
import NavigationBar from 'react-native-navbar'
import Input from '../common/input'

export default class EditName extends Component {

  static contextTypes = {
    page: React.PropTypes.object
  };

  constructor(props) {
    super(props)

    const {users} = this.props.users
    let user = users[`${CURRENT_USER.id}`]

    this.state = {
      first_name: user.first_name,
      last_name: user.last_name
    }
  }

  componentDidMount() {

  }

  render() {

    const {actions} = this.props

    var rightButtonConfig = {
      title: I18n.t('common.save'),
      tintColor: '#ff4068',
      handler: () => {
        actions.updateUser({
          data: {
            first_name: this.state.first_name,
            last_name: this.state.last_name,
          },
          success: () => {
            this.context.page.navigator.pop()
          }
        })
      }
    }
    let leftButtonConfig = <LeftBarButton onPress={() => {this.context.page.navigator.pop()}}/>
    return (
      <View style={[S.container, {backgroundColor: "#EFEFEF"}]}>
        <NavigationBar title={{title:I18n.t('my.name')}} leftButton={leftButtonConfig} rightButton={rightButtonConfig}/>
        <ScrollView>
          <View style={styles.container}>
            <SegmentsGroup>
              <Input
                style={styles.input}
                onChangeText={(value) => this._onChange('first_name', value)}
                placeholder={I18n.t('login.last_name')}
                value={this.state.first_name} />
              <Input
                style={styles.input}
                onChangeText={(value) => this._onChange('last_name', value)}
                placeholder={I18n.t('login.first_name')}
                value={this.state.last_name} />
            </SegmentsGroup>
          </View>
        </ScrollView>
    </View>
    )
  }

  _onChange(key, value){
    this.setState({[key]: value})
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 10,
  },
  input: {
    backgroundColor: '#ffffff',
    height: 44,
    fontSize: 14,
    paddingHorizontal: 10,
    borderBottomWidth: 1,
    borderColor: "#e3e3e3",
  },
})
在这段中 
    var rightButtonConfig = {
      title: I18n.t('common.save'),
      tintColor: '#ff4068',
      handler: () => {
        actions.updateUser({
          data: {
            first_name: this.state.first_name,
            last_name: this.state.last_name,
          },
          success: () => {
            this.context.page.navigator.pop()
          }
        })
      }
    }
定义了一个向右跳转的按钮如果按下则进行hundler的处理， 执行动作actions.updateUser这个动作传递当前页面state的值
success:()这个函数是执行成功的回调pop()函数是返回上级页面
actions.updateUser这个action在/app/host/actions/userActions.js这个文件中
这个文件的全部代码为： 

import * as types from './actionTypes';

import Octopus from '../utils/octopus'


function fetchUser(params) {
  return (dispatch) => {
    dispatch(requestUser(params))
    return Octopus.fetch({url: `/v1/profile/detail.json`, body: {}})
      .then(response => response.json())
      .then(responseData => {
        if(responseData.meta.status == 200) {
          dispatch(receiveUser(params, responseData))
        } else {
          dispatch({type: types.NEED_LOGIN, params: params})
        }
      })
      .catch(reason => {
        __LOG.info(` ${reason} ............................... `)
      })
  }
}

export function loginSuccess() {
  return {
    type: types.LOGIN_SUCCESS,
    params: {}
  }
}

function requestUser(params) {
  __LOG.info(`  start  fetchMessages  ---------------- `)

  return {
    type: types.REQUEST_USER,
    params: params
  }
}

function receiveUser(params, responseData) {
  __LOG.info(` ${JSON.stringify(responseData)}  `)

  return {
    type: types.RECEIVE_USER,
    user: responseData.data.user,
    receivedAt: Date.now()
  }
}

function shouldFetchUser(state, params) {
  const chats = state.messages.chats
  if (chats.id_list.length <= 0) {
    return true
  } else if (chats.is_fetching) {
    return false
  } else {
    return true
  }
}

export function fetchUserIfNeeded(params = {}) {
  return (dispatch, getState) => {
    if (shouldFetchUser(getState(), params)) {
      return dispatch(fetchUser(params))
    }
  }
}

export function updateUser(params = {}) {
  return (dispatch, getState) => {
    if (shouldFetchUser(getState(), params)) {
      return dispatch(putUser(params))
    }
  }
}

function putUser(params) {
  return (dispatch) => {
    dispatch(requestUser(params))
    return Octopus.fetch({url: `/v1/profile/0.json`, method: "PUT", body: params.data})
      .then(response => response.json())
      .then((responseData) => {
        params.success && params.success()
        dispatch(receiveUser(params, responseData))
      })
      .catch(reason => {
        __LOG.info(` ${reason} ............................... `)
      })
  }
}
其中updateUser即为这个函数： 
export function updateUser(params = {}) {
  return (dispatch, getState) => {
    if (shouldFetchUser(getState(), params)) {
      return dispatch(putUser(params))
    }
  }
}
这里的getState()返回的是redux中的那张大表的State（包含一些动作和变量值）， params即为components中 actions.updateUser传递的data和执行成功后返回的参数（参看edit_name组建中定义的按钮中的action.updateUser这个动作传递的实参） 
    var rightButtonConfig = {
      title: I18n.t('common.save'),
      tintColor: '#ff4068',
      handler: () => {
        actions.updateUser({
          data: {
            first_name: this.state.first_name,
            last_name: this.state.last_name,
          },
          success: () => {
            this.context.page.navigator.pop()
          }
        })
      }
    }
回到action中执行if中的 shouldFetchUser()这个函数: 
function shouldFetchUser(state, params) {
  const chats = state.messages.chats
  if (chats.id_list.length <= 0) {
    return true
  } else if (chats.is_fetching) {
    return false
  } else {
    return true
  }
}
是对状态的一些判断，然后执行putUser()这个函数 
function putUser(params) {
  return (dispatch) => {
    dispatch(requestUser(params))
    return Octopus.fetch({url: `/v1/profile/0.json`, method: "PUT", body: params.data})
      .then(response => response.json())
      .then((responseData) => {
        params.success && params.success()
        dispatch(receiveUser(params, responseData))
      })
      .catch(reason => {
        __LOG.info(` ${reason} ............................... `)
      })
  }
}
第一个dispatch(requestUser(params))执行requestUser()这个函数， 
function requestUser(params) {
  __LOG.info(`  start  fetchMessages  ---------------- `)

  return {
    type: types.REQUEST_USER,
    params: params
  }
}
主要在其中做一些数据的验证， 这里先不看回到 putUser()这个函数：
return Octopus.fetch({url: `/v1/profile/0.json`, method: "PUT", body: params.data}) 
      .then(response => response.json())
      .then((responseData) => {
        params.success && params.success()
        dispatch(receiveUser(params, responseData))
      })
其中Octopus.fetch({url: `/v1/profile/0.json`, method: "PUT", body: params.data})做带参数请求api， 将api返回的response转化为json格式， 如果执行成功， 执行dispatch(receiveUser(params, responseData))，先执行 receiveUser(params, responseData)这个函数， 
function receiveUser(params, responseData) {
  __LOG.info(` ${JSON.stringify(responseData)}  `)

  return {
    type: types.RECEIVE_USER,
    user: responseData.data.user,
    receivedAt: Date.now()
  }
}
则整个dispach如果有参数type: types.RECEIVE_USER， 则带着retuen一起的一些其他参数跳转到RECEIVE_USER对应的reducer中， 通过表 / app / host / actions / actionTypes.js这个文件中找到对应关系（当然如果写新的reducer对应action也要在这里进行注册）： 
export const NEED_LOGIN = 'NEED_LOGIN'
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
export const NETWORK_REQUEST_ERROR = 'NETWORK_REQUEST_ERROR'
export const ERROR = 'ERROR'

export const FETCH_CHATS = 'FETCH_CHATS'
export const REQUEST_CHATS = 'REQUEST_CHATS'
export const RECEIVE_CHATS = 'RECEIVE_CHATS'

export const FETCH_CHAT_MESSAGES = 'FETCH_CHAT_MESSAGES'
export const REQUEST_CHAT_MESSAGES = 'REQUEST_CHAT_MESSAGES'
export const RECEIVE_CHAT_MESSAGES = 'RECEIVE_CHAT_MESSAGES'

export const SUCCESS_POST_MESSAGES = 'SUCCESS_POST_MESSAGES'

export const RECEIVE_ROOMS = 'RECEIVE_ROOMS'
export const REQUEST_ROOMS = 'REQUEST_ROOMS'
export const RECEIVE_SINGALROOM = 'RECEIVE_SINGALROOM'
export const RECEIVE_DELETEROOM = 'RECEIVE_DELETEROOM'
现在通过dispath函数从action跳到对应type的reducer中， 也就是 / app / host / reducers / users.js这个文件中： 
import {
  AsyncStorage
} from 'react-native';


import * as types from '../actions/actionTypes';


const initialState = {
  users: {},
  isLoggingIn: true
};

const _KEY = '@BNBTRIPMOBILE:session';

export default function users(state = initialState, action = {}) {
  switch (action.type) {
    case types.RECEIVE_USER:
      var users = state.users
      users[`${action.user.id}`] = action.user
      return Object.assign({}, state, {users: users})
      break;
    case types.POST_USER:
      var users = state.users
      users[`${action.user.id}`] = action.user
      return Object.assign({}, state, {users: users})
      break;
    case types.NEED_LOGIN:
      AsyncStorage.removeItem(_KEY, (error) => {
        __LOG.info(` ----AsyncStorage removeItem: ${_KEY}------------------------- `)

        if (error) {
          __LOG.error(' - (Error) clearing session in local storage! host... ' + error.message);
        }
      });

      CURRENT_USER = {id: undefined, token: undefined}
      return Object.assign({}, state, {isLoggingIn: false})
      break;
    default:
      return state;
  }
}
在这个文件中 
const initialState = {
  users: {},
  isLoggingIn: true
};
这段就是从总的State树中取出对应action的reduter所要用到的异步分数据， 找到case types.RECEIVE_USER:也就是对用action所对应的types的数据处理过程， 
      var users = state.users
      users[`${action.user.id}`] = action.user
      return Object.assign({}, state, {users: users})
      break;
action.user即为action中return时候传递带的一些参数， 即dispath函数执行receiveUser函数的return所带的一些其他参数： 
function receiveUser(params, responseData) {
  __LOG.info(` ${JSON.stringify(responseData)}  `)

  return {
    type: types.RECEIVE_USER,
    user: responseData.data.user,
    receivedAt: Date.now()
  }
}

这些是把对应component中所要用到的值， 也就是State树中相关的值做对应的改变， 来渲染然dom, 到break直接完毕则这个页面就渲染成功了.

组件中props代表的是redux中state一整棵树的值， 但其中的值是上个页面保留的值（因为整棵树在每一次请求api通过返回值， 在reducer中重组state的时候都会改变）， 组件中state的值即为当前组件保存的一些变量值， 可以通过回调来改变state的值来进行对本页面引用state值的dom进行重新渲染



qwbtc
关注
react-redux以及redux状态管理工具详解
weixin_43993776的博客
08-24 364
不管是同步改状态还是异步改状态，只要dispatch就会发布action动作到store对象中，store交给reducer来处理修改响应的状态，从而达到了解耦的效果。redux是原生js实现的，和react没有直接的关系，使用起来相对react-redux稍微麻烦点，需要使用人员自己动手进行消息订阅和取消订阅。4、在入口文件index.js中引入provider，并包裹在App根组件外，其中的store就是创建的store对象。7、使用：组件中存值（异步），和同步使用是一样的。2、组件中存值（同步）
基于react+redux仿饿了么
Quiet-Night的博客
10-12 3964
基于react+redux仿饿了么
redux-react-session：Redux和React的简单会话API存储
02-05
Redux React会话 使会话与本地存储和Redux保持同步 :key: Redux React Session提供了一个API，该API允许通过该应用管理会话，并具有针对和持久会话的授权功能。 安装 纱： yarn add redux-react-session npm： npm install redux-react-session --save 用法 添加会话缩减器： import { combineReducers } from 'redux' ; import { sessionReducer } from 'redux-react-session' ; const red
react项目中集成redux
weixin_45987920的博客
04-06 419
Redux的使用 redux和react-redux的安装 npm install redux npm install react-redux npm install redux-thunk react createStore() 生成store 在项目初始化默认index文件中设置./index.js import {createStore} from 'redux' const store =...
阮一峰老师的react-redux
yuyeqianhen的博客
11-02 1139
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
Redux 异步数据管理
青蛙king的博客
03-01 1184
前言 redux 只处理同步数据流，异步数据流交给 “中间件” 处理。 redux 中间件经历了三次发展： redux-thunk redux-promise redux-saga 一、中间件的概念 “中间件的概念”引自阮一峰老师的博客《Redux 入门教程（二）：中间件与异步操作》，欲进一步学习请自行加餐阮老师准备的盛宴。 为了理解中间件，让我们站在框架作者的角度思考问题：如果要添加功能，你会在哪个环节添加？ （1）Reducer：纯函数，只承担计算 State 的功能，不合适承担.
React + UmiJS: 实现简单登录鉴权
泛泛之素
08-19 9973
在之前的文章Spring WebFlux (7): Springboot Security+jwt登录鉴权实现了后端的鉴权登录，只是通过postman进行了测试，本篇以此为基础通过reactjs和umijs架构编写一个前段登录界面，简单测试登录，页面如下功能： 登入，访问后端api获取token以及权限信息 登入后实现跳转 token信息和roles放入localStorage中 其他路由设置访问权限，通过wrappers进行权限判断 登出，擦除localStorage信息，跳转到login界面 技术栈
mydraft.cc：基于React和Redux的开源线框图工具
标签标签中列举了与项目相关的技术栈和库，包括React、Redux、TypeScript、Webpack、Canvas、SCSS（一种CSS预处理器）、wireframing（线框绘制）、Paper.js等。这些标签表明开发者在构建这个开源线框图工具时，使用...
SpringCloud&React项目国际化的初体验遇到的一些问题和解决方案
zhaoenweiex的博客
01-15 1232
近期负责的项目出现了可能的国外客户，因此要将系统进行国际化，以备开拓国际市场。毕竟赚美元很是带劲。项目前后端分离，前端是基于React开发，后端呢就是SpringCloud全家桶。背景大概就是这样，总是目标就是对系统进行国际化改造，以便支持国际用户。
使用Next搭建React SSR工程架构之基础篇
十年代码写十年
10-21 1432
一、Next.js是什么 Next.js是一个基于React的一个服务端渲染简约框架。它使用React语法，可以很好的实现代码的模块化，有利于代码的开发和维护 1.1 Next.js带来了很多好的特性 默认服务端渲染模式，以文件系统为基础的客户端路由 代码自动分隔使页面加载更快 以页面为基础的简洁的客户端路由 以webpack的热替换为基础的开发环境 使用React的JSX和ES...
underscore应用
04-23
NULL 博文链接：https://bijian1013.iteye.com/blog/2252854
CommonsChunkPlugin详解
关灯吃面
02-25 1944
在不指定的情况下，要提取的公共模块需要在入口文件里显式声明。 // main.js import Vue from 'vue' import App from './App.vue' import _ from "underscore"; new Vue({ el: '#app', render: h =&gt; h(App) }) // main2.js import _...
vue常用全局filter
weixin_30918415的博客
04-14 236
保留小数位数 Vue.filter("toFixed", function (val, acc) { //保留小数位，acc为保留几位小数位 let num = parseFloat(val); if (isNaN(num)) { num = 0; } let accuracy = ...
ES6详解八：模块（Module）！
热门推荐
言川的博客
10-10 5万+
modules是ES6引入的最重要一个特性。 所以以后再写模块，直接按照ES6的modules语法来写，然后用 babel + browserify 来打包就行了。modules规范分两部分，一部分是如何导出，一部分是如何导入。基本用法命名导出(named exports)可以直接在任何变量或者函数前面加上一个 export 关键字，就可以将它导出。 这种写法非常简洁，和平时几乎没有区别，唯一的
在使用vue-cli脚手架的项目中引用underscorejs
d_append的博客
07-12 1951
第一步: 下载npm包 执行npm install underscore --save或者cnpm install underscore --save npm install underscore --save 或 cnpm install underscore --save 第二步:然后到想使用underscore的vue文件下的script导入 import _ from "underscore" 第三步: 导入后就可以在method使用underscore的方法了 显示的结果: ...
Underscore.js使用方法
Bright2017的博客
08-28 2156
参考地址:https://blog.youkuaiyun.com/lybwwp/article/details/50833963 官网地址:http://www.bootcss.com/p/underscore/# 练习Demo:http://www.bright2017.top/test1/test1-21/
angular7+underscore的使用
gaiery的博客
07-09 560
方式一 1.首先下载underscore npm install underscore --save npm install @types/underscore --save 2.在需要的模块引入underscore import * as _ from 'underscore'; 3.在需要的模块可以直接使用了 this.fileLists=_.reject(this.fileLists,(el)=>{ return item.file.name==el.name; }) 方式二 1.首先
Redux 进阶教程
沈斯明技术博客
02-04 521
原文（保持更新）：https://github.com/kenberkeley/redux-simple-tutorial/blob/master/redux-advanced-tutorial.md 写在前面 相信您已经看过 Redux 简明教程，本教程是简明教程的实战化版本，伴随源码分析 Redux 用的是 ES6 编写，看到有疑惑的地方的，可以复制粘贴到这里在线编译 ES5
vue 使用underscore lodash debounce  throttle
qq_40774743的博客
04-16 2081
在解析研究underscore， lodash源码，的使用，我想underscore 引入vue，本来很简单的事情 第一步： npm installunderscore --save 第二，在 自己的组件内 引入import _ from "underscore" 第三使用： 使用， 这时候出问题了， arr 方法 obj 方法都是好用的正常的，例如 var numbers ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值