react-redux 的使用 （偏实战）

前景提要

• 需要使用 provider 将 store 数据给 容器组件
• 需要使用 connect()用于连接容器组件和UI组件
• 本文是在你已经将 store 骨架搭建完毕的情况下进行的 -----没有可点击此处参考（仅供参考）

UI组件

• 只负责 UI 的呈现，不带有任何业务逻辑
• 没有状态（即不使用this.state这个变量）
• 所有数据都由参数（this.props）提供
• 不使用任何 Redux 的 API

容器组件

• 负责管理数据和业务逻辑，不负责 UI 的呈现
• 带有内部状态
• 使用 Redux 的 API

1. 下载 react-redux

npm install react-redux -S 或者 yarn add react-redux

2. 将store 的数据派给容器组件（子组件）

• 在 src 的 index.js 里面使用即可，这样全局都可以使用到 store
• 这样你就不需要在子组件中再引入 store

import store from './store'   //引入 store
import {Provider} from 'react-redux'   //引入 react-redux

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

3. 使用 connect()

某个子组件中⬇⬇⬇

import actionCreators from "../../store/todoList/actionCreators"  //引入 
import { connect } from 'react-redux'  //引入 connect()

const mapStateToProps = state =>({
    todos:state.todoList.todos
})
const mapDispatchToProps = actionCreators;  //actionCreators 创建 action 事件的那个js文件
export default connect(mapStateToProps,mapDispatchToProps)(TodoContent)

• mapStateToProps 可以让UI组件通过属性获取到redux管理的状态（store 数据）
  • state 为 外部 Provider 传递过来的 store 参数
  • mapStateToProps内部为 将 store 里面的数据赋值给现在的 todos
• mapDispatchToProps可以让ui组件通过属性获取到更改redux状态的方法（action 方法）。

//store/todoList/actionCreators
export default { 
    addNewTodo(title){ 
        let action = {
            type:ADD_NEW_TODO,
            title
        }
        return action
    },

4. 使用得到的数据

• this.props
• 和上一步同一个组件

    render() {
        return (
            <ul>
                {
                  this.props.todos.map(item=>{   //使用 ⬅⬅⬅⬅⬅
                    return <LiItem key={item.id} item={item}/>
                })
                }
            </ul>
        )
    }

5. 使用得到的方法

• this.props.方法名(传递的参数)
• 和上一步同一个组件

    const deleteTodo = ()=>{  //点击某处触发的函数（无关）
        this.props.deleteNewTodo(props.item.id)    //使用 传递过来的方法
    }

结构展示

推荐文章 https://www.jianshu.com/p/ad7eddb23d66