13react之react-redux

1.安装

• npm install redux --save（用于中间键applyMiddleware和createStore）

• npm install react-redux --save（用于装饰器写法connect）

• npm install --save prop-types（监听数据格式传递是否正确）

• redux-thunk：npm install redux-thunk --save（用于thunk，可以异步加载）

• redux-logger： npm install redux-logger --save

2.新建store文件

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger'
import thunk from 'redux-thunk'

let defaultState = {count:1}
//第一个reducer
const FirstReducer = (state=defaultState,action)=>{
    switch(action.type){
        case 'add':
            return {count:state.count+1};
        case 'reduce':
            return {count:state.count-1};
        default:
            return state;
    }
}
//创建数据仓库，把编写好的reducer传给createStore
const store = createStore(FirstReducer,applyMiddleware(thunk,logger));//用applyMiddleware中间键会异步加载，传入logger参数时组件操作会自动打印日志,参数thunk表示异步加载

export default store;

3.react-redux.js文件

解释：connect是高阶函数的写法，主要是将组件内的state和dispatch都转化成props来调用。第一个参数是mapStateToProps，返回想要的的值类型，第二个参数是mapDispatchToProps，返回的组件中的方法。

1）.非装饰器写法

import React, { Component } from 'react';
import { connect } from 'react-redux'
const mapStateToProps = (state,ownProps)=>{//第一个参数就是 Redux的store,第二个参数 ownProps是组件自己的 props
    console.log(state,ownProps,'state,ownProps')
    return {
        count:state.count
    }
}

const mapDispatchToProps = (dispatch)=>{
    return {
        add:()=>dispatch({type:"add"}),
        reduce:()=>dispatch({type:"reduce"})
    }
}
class FirstRedux extends Component {
    state = {  }
    render() { 
        return ( 
            <div>
                {/* 属性获取 */}
                {this.props.count}
                {/* 方法调用 */}
                <button onClick={()=>{this.props.add()}}>加一</button>
                <button onClick={()=>{this.props.reduce()}}>减一</button>

            </div>
         );
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(FirstRedux);

2）装饰器写法

import React, { Component } from 'react';
import { connect } from 'react-redux'
@connect(
    state=>({count:state.count}),//这里的state是参数，store里面的形参
    dispatch=>({
        add:()=>dispatch({type:"add"}),//这里的dispatch是参数，store里面的形参
        reduce:()=>dispatch({type:"reduce"}),//这里的dispatch是参数，store里面的形参
        asyncAdd:()=>dispatch=>{
            setTimeout(()=>{
                dispatch({type:"add"});//异步调用，直接写的话就会报错，需要借助thunk
            },2000)
        }
    }),
)
class FirstRedux extends Component {
    state = {  }
    render() { 
        return ( 
            <div>
                {/* 属性获取 */}
                {this.props.count}
                {/* 方法调用 */}
                <button onClick={()=>{this.props.add()}}>加一</button>
                <button onClick={()=>{this.props.reduce()}}>减一</button>

            </div>
         );
    }
}
export default FirstRedux;

3）调用：
state调用：this.props.count。
方法：this.props.add()

3.在组件被render的地方，或者根目录root被render的地方：

import './index.css';
import App from './App';
import store from './components/redux/store'
import {Provider} from 'react-redux';

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import {FirstReducer} from './components/redux/store2'

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