redux及结合react、dva的使用

三种情况:

1.redux的简单使用

新建action.js,用来存贮数据及类型

const action2 = () => {
    return {
        type: "send_type",
        value: "我是action"
    }
}
module.exports = {
    action2
}

新建reducer.js,用来接收action,并且进行处理的地方

const initState = {
    value: "默认值"
}
const reducers = (state = initState, action) => {
    switch (action.type) {
        case "send_type":
            return Object.assign({}, state, action)
        default:
            return state
    }
}
module.exports = {
    reducers
}

store.js 用来连接action和reducers的
import { createStore } from 'redux';
// 导入reducer
import { reducer } from '../reducer/index';

//构建store
const store = createStore(reducer);
export default store;

页面中使用
handClick = () => {
        const action = action2();
        //发送一个action 在需要改变state的时候调用
        store.dispatch(action)
    }
componentDidMount() {
        store.subscribe(() => {
            console.log('11', store.getState());
            this.setState({})
        })

    }
    

2.结合react使用

新建reducer.js,用来接收修改属性值

##### 注意:react中state直接在reducers中定义
const initState = {
    count: 10
};
const reducer = (state = initState, action) => {
    console.log('rduc', state, action);

    switch (action.type) {
        case 'add_action':
            return {
                count: state.count + 1
            }
        default:
            return state
    }
}
module.exports = {
    reducer
}

store.js 同上(store.js),

react-redux中需要用provider来包裹组件,

目的是要把store提供给所有子组件使用,如:

import { Provider } from 'react-redux'
import store from '../src/store/index'
return (
    <Provider store={store}>
      <div className="App">

        <Zu1></Zu1>
        <Zu2></Zu2>
      </div>
    </Provider>
    )

组件中使用:
zu1.js

import React from 'react';
import { connect } from 'react-redux';
class zu extends React.Component {
    render() {
        return (
            <button onClick={this.onclick}>+</button>
        )
    }
    onclick = () => {
        this.props.sendAction()
    }

}
const mapDispatchToProps = (dispatch) => {
    return {
        sendAction: () => {
            dispatch({
                type: "add_action",
                value: "123"

            })
        }
    }
}
export default connect(null, mapDispatchToProps)(zu);

zu2.js

import React from 'react';
import { connect } from 'react-redux';
class zu2 extends React.Component {
    render() {
        return (
            <div>{this.props.count}</div>
        )
    }
}
const mapStateToProps = state => {
    return state
}
export default connect(mapStateToProps)(zu2);

这里主要通过一个类似高阶函数(connect)来进行传值和取值,一般接收两个参数:
1.agr1主要是进行接收返回的值,
2.arg2主要是通过dispatch来进行触发方法,改变state等
例如zu1中触发reducer的add_action来进行加1,zu2中返回
return state
页面中显示:{this.props.count}

3.结合dva框架使用(dva中的model)

model文件夹下面新建test.js

reducer中设置setname方法,
注意:返回值需要进行深拷贝,不然不能实现实时更新
页面中使用:

这里通过dispatch来触发reducer,不同的是这里的type需要加一层路径my/(这里my是命名空间,在test.js中通过namespace定义)

第二种调用方法,异步调用,主要通过es6的generatoe来实现,在model.js中的effets对象中撰写

如下:

通过*来定义function,通过yield put来修改data值(put,call具体可以查看es6文档详细内容)

dva中subscription的用法

在subscriptions的对象中撰写
如:当页面切换到user页面的时候触发testPath方法