react-redux

react-redux

主要: react-redux与redux并不完全一样

  1. 主要特征
  • ui组件
用户提供的页面
  • 容器组件
    由 React-Redux 自动生成
  1. 使用方法
  • TodoList 是Ul组件
  • mapStateToProps 将state映射到 UI 组件的参数(props)
  • mapDispatchToProps 将用户对 UI 组件的操作映射成 Action
  • connect方法可以省略mapStateToProps参数,那样的话,UI 组件就不会订阅Store,就是说 Store 的更新不会引起 UI 组件的更新。

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)
  1. mapStateToProps
  • 建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系。
    @params: state state对象
    @params: props 容器组件的props对象
    const mapStateToProps = (state, ownProps) => {
      return {
        active: state.count
      }
    }
    
    1. mapDispatchToProps
    • 接收一个回调函数
      拥有 dispatch, ownProps 两个参数
    const mapDispatchToProps = (
      dispatch,
      ownProps
    ) => {
      return {
        onClick: () => {
          dispatch({
            type: 'SET_VISIBILITY_FILTER',
            filter: ownProps.filter
          });
        }
      };
    }
    
    • 接收一个对象
    const mapDispatchToProps = {
      onClick: (filter) => {
        type: 'SET_VISIBILITY_FILTER',
        filter: filter
      };
    }
    
    1. 组件
    • React-Redux 提供Provider组件,可以让所有容器组件拿到state。
    
    import { Provider } from 'react-redux'
    import { createStore } from 'redux'
    import todoApp from './reducers'
    import App from './components/App'
    
    let store = createStore(todoApp);
    
    render(
      
        
      ,
      document.getElementById('root')
    )
    
    • store放在了上下文对象context上面。然后,子组件就可以从context拿到store
    class VisibleTodoList extends Component {
      componentDidMount() {
        const { store } = this.context;
        this.unsubscribe = store.subscribe(() =>
          this.forceUpdate()
        );
      }
    
      render() {
        const props = this.props;
        const { store } = this.context;
        const state = store.getState();
        // ...
      }
    }
    
    VisibleTodoList.contextTypes = {
      store: React.PropTypes.object
    }
    
    1. 完整代码
    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    import ReactDOM from 'react-dom'
    import { createStore } from 'redux'
    import { Provider, connect } from 'react-redux'
    
    // React component
    class Counter extends Component {
      render() {
        const { value, onIncreaseClick } = this.props
        return (
          
    {value}
    ) } } Counter.propTypes = { value: PropTypes.number.isRequired, onIncreaseClick: PropTypes.func.isRequired } // Action const increaseAction = { type: 'increase' } // Reducer function counter(state = { count: 0 }, action) { const count = state.count switch (action.type) { case 'increase': return { count: count + 1 } default: return state } } // Store const store = createStore(counter) // Map Redux state to component props function mapStateToProps(state) { return { value: state.count } } // Map Redux actions to component props function mapDispatchToProps(dispatch) { return { onIncreaseClick: () => dispatch(increaseAction) } } // Connected Component const App = connect( mapStateToProps, mapDispatchToProps )(Counter) ReactDOM.render( , document.getElementById('root') )

    你可能感兴趣的:(react-redux)