美文网首页
React Redux Template

React Redux Template

作者: Moon_Yue | 来源:发表于2016-02-27 21:31 被阅读186次

Ducks-modular-redux方法,将{actionTypes,actions,reducer}放于一个文件中,规则

  1. MUST export default a function called reducer()
    
  2. MUST export its action creators as functions
    
  3. MUST have action types in the form npm-module-or-app/reducer/ACTION_TYPE
    
  4. MAY export its action types as UPPER_SNAKE_CASE, if an external reducer needs to listen for them, or if it is a published reusable library
    

modules/counter.js

const INCREMENT = 'app/counter/INCREMENT'

export default function reducer(state=0,action){
  switch(action.type){
    case INCREMENT:
      return state + 1;
    default:
      return state;
  }
}

export function increment(){
  return {
    type:INCREMENT
  }
}

compoments/Counter.js

import React,{PropTypes, Component} from 'react'

export default class Counter extends Component{
  static propTypes = {
    counter:PropTypes.number.isRequired,
    increment:PropTypes.func.isRequired
  };
  constructor(props){
    super(props)
  }
  render(){
    const {counter, increment} = this.props;
    return(
      <div>{counter}<button onClick={increment}>+</button></div>
    )
  }
}

containers/Counter.js

import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'

import Counter from '../components/Counter'
import * as CounterActions from '../modules/counter'

const mapStateToProps = state => ({counter:state.counter})
const mapDispatchToProps = dispatch => bindActionCreators(CounterActions,dispatch)

export default connect(mapStateToProps,mapDispatchToProps)(Counter)

modules/reducers.js

import {combineReducers} from 'redux'

import counter from './counter'


const rootReducer = combineReducers({
  counter
})

export default rootReducer

参考:
redux中文文档

相关文章

  • React Redux Template

    Ducks-modular-redux方法,将{actionTypes,actions,reducer}放于一个文...

  • redux例子工程代码阅读

    简介 使用命令npx create-react-app my-app --template redux会创建一个r...

  • Redux for ReactNative (二)

    安装 React Redux Redux不包含React库,需要单独安装React 绑定库 react-redux...

  • redux

    单独使用redux redux是核心库 与react配合使用redux 安装react-redux react-r...

  • 两张图看懂 React Redux 架构和数据流

    React 技术栈 React - 视图层Redux - 状态、数据层React-Redux - 连接Redux-...

  • redux note(一)

    redux 搭配 React使用 Redux和React之间没有关系,Redux支持React, Angular,...

  • react-redux

    一、什么是react-redux React-Redux是Redux的官方React绑定。 它允许您的React组...

  • redux的简单应用

    1、安装 redux和react-redux: npm i redux react-redux --save-de...

  • Redux简介

    Redux React-redux React-router Redux 1、基本用法: Redux中存在几个概念...

  • redux基础

    Redux react-redux React-router Redux 1、基本用法: Redux中存在几个概念...

网友评论

      本文标题:React Redux Template

      本文链接:https://www.haomeiwen.com/subject/rkgwkttx.html