react-redux

React Redux是啥

React Redux是Redux的官方React绑定。它使您的React组件可以从Redux存储中读取数据，并向存储分派操作以更新数据

这里需要再强调一下：Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。
尽管如此，Redux 还是和 React 和 Deku 这类库搭配起来用最好，因为这类库允许你以 state 函数的形式来描述界面，Redux 通过 action 的形式来发起 state 变化。

容器组件和展示组件

react-redux是基于 容器组件和展示组件相分离的开发思想

UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

如果一个组件既有 UI 又有业务逻辑，那怎么办？回答是，将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。

大部分的组件都应该是展示型的，但一般需要少数的几个容器组件把它们和 Redux store 连接起来。这和下面的设计简介并不意味着容器组件必须位于组件树的最顶层。如果一个容器组件变得太复杂（例如，它有大量的嵌套组件以及传递数不尽的回调函数），那么在组件树中引入另一个容器

connect()

connect()函数将React组件连接到Redux存储。
它为连接的组件提供了存储中所需的数据片段，以及可用于将操作分配给存储的功能。

它不会修改传递给它的组件类。而是返回一个新的，已连接的组件类，该类包装您传入的组件。

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

connect 接受四个参数，均为可选参数

• mapStateToProps?: Function
• mapDispatchToProps?: Function | Object
• mergeProps?: Function
• options?: Object

mapStateToProps?: (state, ownProps?) => Object

它是一个函数，建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。
mapStateToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射

mapDispatchToProps?: Object | (dispatch, ownProps?) => Object

mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。

const mapStateToProps = state => {
    return{
        todos : getVisibleTodos(state.todos,state.visibilityFilter)
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onTodoClick : id => {
            dispatch(toggleTodo(id))
        }
    }
}

const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatchToProps
)(TodoList)

<Provider> 组件

<Provider />使得Redux store可用于该connect()函数中包装的任何嵌套组件。

由于可以连接React Redux应用程序中的任何React组件，因此大多数应用程序都将<Provider>在顶层渲染，其中包含整个应用程序的组件树。

let store = createStore(todoApp,applyMiddleware(thunkMiddleware))
const App = () => (
    <Provider store={store}>
        <AddTodo />
        <VisibleTodoList />
        <Footer />
    </Provider>

参考

https://www.jianshu.com/p/ad7eddb23d66
https://react-redux.js.org/introduction/quick-start#connect
https://segmentfault.com/a/1190000017064759?utm_source=tag-newest#articleHeader16