react使用redux

文件结构:

count
    index.js
store
    index.js
    reducer.js
    state.js
    actionCreator.js

普通用法：redux

安装redux

npm install --save redux

1、store/state.js

定义状态

export default {
    num: 1
}

2、store/reducer.js

引入状态

import state from "./state";
const reducer = (prevState = state, action) => {
    let newState = {...prevState}
    switch (action.type){
        case 'addNum':
            newState.num = newState.num + 1
            break;
        default:
            break;
    }
    return newState
}

3、store/index.js

引入reducer

import {createStore} from "redux";
import reducer from './reducer'

const store = createStore(reducer)

export default store

4、store/actionCreator.js

引入store，分发事件

import store from "./index";

export default {
    addNum(){
        let action = {
            type: 'addNum'
        }
        store.dispatch(action)
    }
}

5、count/index.js

引入store，分发事件

import React,{Component} from "react";
import store from "../store";
import actionCreator from "../store/actionCreator";
export default class Count extends Component{
    constructor() {
        super();
        this.state = {
            num: store.getState().num
        }

    }
    componentDidMount() {
        store.subscribe(()=>{
            this.setState({
                num: store.getState().num
            })
        })
    }

    changeNum = () => {
        actionCreator.addNum()
    }
    render() {
        return (
            <div>
                {this.state.num}
                <div>
                    <button onClick={this.changeNum}>change</button>

                </div>
            </div>
        )
    }
}

进阶用法：使用react-redux

安装react-redux

npm install --save react-redux

1、修改src/index文件

用Provider包裹，将store注入

import Count from "./count";
import {Provider} from "react-redux";
import store from "./store";

ReactDOM.render(
    <Provider store={store}>
        <Count />
    </Provider>
 ,
  document.getElementById('root')
);

2、修改store/actionCreator.js文件

使用return action

import store from "./index";

export default {
    addNum(){
        let action = {
            type: 'addNum'
        }
        //store.dispatch(action)
        return action
    }
}

3、修改count/index.js文件

this.props.num
this.props.addNum
connect(state => state, {…actionCreator})(Count)

import React,{Component} from "react";
import store from "../store";
import actionCreator from "../store/actionCreator";
import {connect} from "react-redux";

class Count extends Component{
    constructor() {
        super();
    }
    changeNum = () => {
        this.props.addNum()
        //actionCreator.addNum()
    }
    render() {
        return (
            <div>
                {this.props.num}
                <div>
                    <button onClick={this.changeNum}>change</button>
                </div>
            </div>
        )
    }
}

export default connect(state => state, {...actionCreator})(Count)