react插件(228)

发表于   |   分类于

react-thunk

我一开始觉得把props.dispatch当参数传总会异步的，但是当多个时就会分不清。

  1. 只有store的dispatch后面才能跟then，其它都不能
  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     function test(tt) {
      return function(dis) {
        let tt = dis(addTodo('wangqiu'));//函数出入的参数就是dispatch，所以以次来异步发action
        return dis(toggleTodo(tt));
      }
    }
       <TodoList
              todos={visibleTodos}
              onTodoClick={index =>
                {dispatch(test(index))}//普遍做法如此，给dispatch传个函数进去
              } />

immutable

https://www.w3cplus.com/javascript/immutable-js.html

Redux

最近看react-redux,
connect中的参数有mapStateToProps和mapDispatchToProps,剩下俩个不说,
他们第二个参数ownProps,指的是当前组件的属性
它指的是mapStateToProps之外的属性(即通过xml属性传递的属性),state转prop后自己是能访问到的。

connect的第二个参数,redux会给mapDispatchToProps传一个dispatch参数，拿到后可以自己做，它的返回值会被直接注入到组件的props里面。我喜欢直接返回dispatch

1
2
3
4
5
6
7
const mapDispatchToProps = dispatch => {
    return {
            onTodoClick: id => {
            dispatch(toggleTodo(id))
        }
    }
}

redux-actions

createAction
以前:
const startAction = () => ({type:START})
使用:

1
2
import {createAction} from 'redux-actions';
const startAction = createAction(START);

handleactions
以前:

1
2
3
4
5
6
function handle(state=defaultState, action) {
    switch(action.type) {
        case START : {return {...state, runStatus:true}};//es6的解构太方便了，会直接覆盖
        case STOP: {return {...state, runStatus:false}};//同名属性覆盖
    }
}

使用:

1
2
3
4
5
import {handleActions} from 'redux-actions';
const time = handleActions({
    START:(state, action) => ({...state, runStatus:true}),
    STOP:(state, action) => ({...state, runStatus:false}),
}, defaultState);

// //