Redux—— react-redux ：简化 redux

1、下载 react-redux

npm install react-redux redux

以下例子是：input框的值使用store里的值，并且改变input框里的值会同时改变store里的值

2、在 index.js 中配置

• 引入 react-redux 的连接组件 Provider
• 引入 store
• 使用 Provider 包裹子组件，并传入store，这样 Provider 的子组件都可以使用store

import React from 'react';
import ReactDOM from 'react-dom';
import Test from './Test'
import {Provider} from 'react-redux' // 引入连接组件
import store from './store/index' // 引入store

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>  {/* 使用 Provider 包裹子组件，并传入store，这样 Provider 的子组件都可以使用store */}
      <Test />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

3、子组件使用 react-redux

• 引入 connet 连接组件
• 创建映射函数 mapStoreToPorps —— 把 store 的某些值映射到 props 上
• 创建映射函数 mapDispatchToProps —— 把要使用 dispatch 的方法映射到 props 上
• 导出使用了映射规则的组件

import React, {Component} from 'react'
import {connect} from 'react-redux' // 引入connet连接组件

class Test extends Component{
    render() {
        return (
        	{/*通过调用props的属性和方法使用store*/}
            <input value={this.props.inputValue} onChange={this.props.inputValueChange}/>
        )
    }
}

// 创建映射函数 mapStoreToPorps —— 把 store 的某些值映射到 props 上
const mapStoreToPorps = (store) => {
    return {
        inputValue: store.inputValue
    }
}

// 创建映射函数 mapDispatchToProps —— 把要使用 dispatch 的方法映射到 props 上
const mapDispatchToProps = (dispatch) => {
    return {
        inputValueChange(e){
            const action = {
                type: 'input_value_change',
                value: e.target.value
            }
            dispatch(action)
        }
    }
}

// 导出使用了映射规则的组件
export default connect(mapStoreToPorps, mapDispatchToProps)(Test)

4、./store —— 最简单的配置即可

• ./store/index.js

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

const store = createStore(
        reducer
        //window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // 使用Redux tools时要去掉注释 
    )

export default store

• ./store/reducer.js

const defalutStore = {
    inputValue: ''
}

export default (state = defalutStore, action) => {
    if(action.type === 'input_value_change'){
        const newState = JSON.parse( JSON.stringify(state) )
        newState.inputValue = action.value
        return newState
    }
    return state
}