1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/evolify-EvRedux

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 4.2 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 30.11.2024 03:36 a1f9dc5

EvRedux: простой способ использования Redux

При использовании Redux в React обычно требуется промежуточное ПО для поддержки асинхронных действий, например, redux-thunk.

Мы должны писать действия и редукторы следующим образом:

//ActionType R.js
export ActionType{
  TYPE1:'type1',  
  TYPE2:'type2',  
  TYPE3:'type3',  
  // others
}
    
//reducer reducer.js
import {ActionType as AT} from 'R'
export default function(state={},action){
  switch(action.type){
    case AT.TYPE1:
      return {
        ...state,
        ...action.data,
        // or other
      }
    case AT.TYPE2:
      //...
    default:
    return state      
  }      
}

//Action Action.js
import {ActionType as AT} from 'R'
const act = {
  action1:data=>dispatch=>{
    // some action such as ajax
    dispatch({
      type:AT.TYPE1,
      data:{
        // data
      }
    })
  },    
  action2:()=>(dispatch,getState)=>{
  	// call another action
  	dispatch(act.action3())
  },
  action3:()=>()=>{
    // even you never use the dispath or getState,you still have to code like this.
  }
}
export default act

// Component
@connect(
	state=>state.reducer1,
  dispatch=>bindActionCreators(Action,dispatch)
)
export default class View extends React.Component{
    doAction1(){
      this.props.action1({})
    }
    render(){
      return(
      <div>
          anything else
        </div>
      )
    }
}

Разве это не ужасно — писать так много ActionType, редукторов, dispatch и getState?

Теперь с EvRedux всё становится проще:

Сначала установите ev-redux:
npm i --save ev-redux

Затем вы пишете код следующим образом:

// init evStore in you app.js when create store.
import {evStore} from 'ev-redux'
const store = createStore(...)
evStore.init(store)

// redux/reducer.js
import {ActionType as TYPE} from './index.js'
const initState={}
export default function(state=initState,action){
    if(action.type === TYPE){
        return {
            ...state,
            ...action.data
        }
    }
    return state
}

// redux/Action.js
import {evRedux} from 'ev-redux'

@evRedux
export default class Action{
    constructor(actionType){
        this.actionType = actionType
    }
    action1(x){
        this.update({
            x
        })
    }
    action2(){
        this.dispatch({
            type:this.actionType,
            data:{y:this.getState().reducer2.y+1}
        })
        // to call another action, just call no need dispath!
        this.action3({z:3})
        // или просто update
        // this.update({y:this.getState().reducer2.y+1})
    }
    action3(z){
        setTimeout(()=>{
            this.update({z})
        },1000)
    }
}

// redux/index.js
import Action from './Action'
import reducer from './reducer'
import {connect as conn} from 'react-redux'

const connect = view => conn(state=>state.reducer2)(view)
const ActionType = Symbol()
const action = new Action(ActionType)

export {reducer,ActionType,action,connect}

// Component
import action from './action'
@connect
export default class View extends React.Component{
    doAction1(){
    	// просто вызываем действие как функцию.
      action.action1()
    }
    render(){
      return(
      	<div>
          anything else
        </div>
      )
    }
}

Разве это не удивительно?

  • Не нужно промежуточное ПО для асинхронных действий.
  • Нет необходимости писать множество ActionTypes.
  • Нет нужды в большом количестве редукторов, достаточно сконструировать состояние в действии.
  • Нет необходимости вручную кодировать dispatch и getState, можно просто вызывать действие, как обычную функцию.

Не терпится попробовать? Просто npm i --save ev-redux.

TODO

Упростить редуктор.

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/evolify-EvRedux.git
git@api.gitlife.ru:oschina-mirror/evolify-EvRedux.git
oschina-mirror
evolify-EvRedux
evolify-EvRedux
master