浅谈Redux(三)

React-Redux的介绍与使用

React-Redux是为了方便使用Redux而封装的一个react库，你可以使用它将组建分为UI组件(只负责渲染页面)，和容器组件(负责管理数据，业务逻辑)。

1.Provider
Provider的作用是把store提供给子组件，让其子组件能获取到store

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
    <Provider store={store}>
        <Router>
            <App />
        </Router>
    </Provider>, document.getElementById('root'));

serviceWorker.unregister();

2.connect()
connect(）的作用是将store中的state和action方法映射到组件中，connect是一个高阶组件(Hoc)。

import React, { Component } from 'react'
import { connect } from 'react-redux'
import actionCreator from '../my/actionCreator'
 class New extends Component {
    constructor(props){
        super(props)
        this.state = {
            list:[]
        }
    }
    list = () => {
		this.props.listAction()
	}
    render() {
        return ()
    }
}
const mapState = {
	return {
		list:this.props.list
	}
}
export default connect(mapState,actionCreator)(New)

使用connect()你将不需要使用subscribe()对数据进行更新，并且可以使用mapState添加一些组件内使用的数据，更方便对Redux的使用。