react-redux的使用

react-redux

store存储状态数据

reducer 接受action并更新store

通过Provider 将store里面的数据通过props传给子孙组件

通过connect高阶函数连接react组件与redux 有四个参数 一般只用前两个 mapStateToProps mapDispatchToProps 第一个参数将数据映射到props里 第二个参数可以dispatch一些方法

//store index.js

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

const store = createStore(reducer)
export default store

//store reducer.js

const defaultState=  {
    testValue:1
}


export default function(state=defaultState,action){
    console.log(action)
    switch (action.type){
        case 'add':
            return {...state,testValue:state.testValue+action.value}
        default:
            return state;
    }
}

入口文件 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './Store'
import {Provider} from 'react-redux'
ReactDOM.render(
  <Provider store={store} >
    <App  />
    </Provider>
  ,
  document.getElementById('root')
);

//组件的使用
import React from 'react'
import {connect} from 'react-redux'
function Index (props){
    return <div>
        <button onClick={props.add}>
            ➕
        </button>
        {
            props.testValue
        }
    </div>
}
const mapStateToProps = (state)=>{
    return {...state}
}
const mapDispatchToProps = (dispatch)=>{
    return {
        add(){
            const action = {
                type:'add',
                value:1
            }
            dispatch(action)
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Index)