37.React redux的使用（2） - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

yarn add react-redux

// 或者npm
npm i react-redux

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

    const store = createStore(reducer)

    export default store

   const defaultState = {
      inputValue: '',
      list: []
   }
   export default (state = defaultState, action) => {
      return state
   }

   import React from 'react'
   import ReactDOM from 'react-dom'
   import TodoList from './TodoList'
   import { Provider } from 'react-redux'
   import store from './store'
   
   const App = (
    // Provider提供器连接了store，则Provider内部的所有组件就都有能力获取到store中的内容了
    <Provider store={store}>
        <TodoList/>
    </Provider>
   )
   
   ReactDOM.render(App, document.getElementById('root'))
   

   import React, {Component} from 'react'
   import stroe from './store'
   import { connect } from 'react-redux'

   class TodoList extends Component {
      render() {
        reture (
         // 3.这里使用 this.props.inputValue就可以直接调用到store中的inputValue
         // 以前不使用react-redux时（只使用redux），我们在使用store数据的时候， 当store数据改变的时候，我们还需要在组件中订阅store.
         // 现在【使用了react-redux,当store中的数据发生了变化时，组件会自动跟着变化】。
         <input value={this.props.inputValue} onChange={this.props.changeInputValue}/>
        )
      }
   }
   
   // 2.连接规则：把store里面的数据映射到组件的props
   const mapStateToProps = (state) => {
      // state 指的就是store里数据
      return {
         inputValue: state.inputValue
      }
    }
  
   // 4.把changeInputValue方法写在mapDispatchToProps的原因是：
     // 这个方法要去改变store中的内容，也就是说要去派发action，而mapDispatchToProps里面就有现成的dispatch方法。
    // 所以，我们把changeInputValue方法写在这里。
   const mapDispatchToProps = (dispatch) => {
      // dispatch方法指的就是store.dispatch()
      return {
          changeInputValue(e) {
             // dispatch() // 可以直接调用dispatch来改变store中的数据
             console.log(e.target.value)
             
             const action = {
                type: 'change_input_value'
                value: e.target.value
             }
             dispatch(action)
          }
      }
   }
   
   export default connect(mapStateToProps, mapDispatchToProps)(TodoList)
   // 1.connect()方法作用：让TodoList 组件和store进行连接
   // 同时符合mapStateToProps和 mapDispatchToProps这两个映射关系
   // 第一个映射关系是用来映射数据的
   // 第二个映射关系是让store.dispatch映射到了props上