react-redux连接react与redux入门案例

利用react-redux实现一个简单的翻译案例

要实现react组件与redux的连接用到第三方组件react-redux

一、现在简单的介绍下react-rendux组件的API方法

安装npm install react-redux --save-dev到你的工程项目中Provider这个属性的使用:我们相当于在最顶层的组件中外套这个属性就可以。传递的参数store,那么在所有的组件中都可以使用到store //案例: ReactDom.render( <Provider store = {store}> <App /> </Provider>, document.getElementById('example') ); connect属性connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])现在我们忽视第三个第四个参数来介绍，第一参数mapStateToProps就是映射到组件内要传递的props，第二个mapDispatchToProps则是映射到组件内actions，但是他们度是函数的返回值，connect函数返回一个函数wrapWithConnect(WrappedComponent)，该函数唯一参数是传递一个组件，需要被包起来的组件。 //使用案例：如果是传递第一个参数一个props[但是传递一个函数进去，我本人尝试直接传递一个对象进去就不可以] const mapHelloStateToProps = (state, ownProps) => { return { msg: state.msg ? state.msg : ownProps.msg } } const HelloWorld = connect(mapHelloStateToProps)(Hello) //`connect`(函数)返回后传递一个组件`Hello`进去，可以理解为connect包装了下把函数`mapHelloStateToProps`的返回值传递给了`Hello`组件，返回一个新的组件 //使用案例，传递actions进去 const chToEng1 = (dispatch,ownProps)=>{ return{ send:()=>{ dispatch(actions.sendShowEnglishMsg()); } } } const ChToEngBtn = connect(null,chToEng1)(ChToEng); //大致理解跟上面的一样的

二、开发项目

项目基本搭建，有不清楚的可以查看下本人简单介绍的关于ES6+React+webpack的环境搭建文章增加依赖包npm install react-redux redux --save-dev创建文件目录containers(存放内容组件)、coomponents (存放展示组件)、actions、reducers等别的文件夹在actions文件夹中创建文件，代码如下: const actions = { sendShowChineseMsg: () => ({ type: 'chinese' }), sendShowEnglishMsg: () => ({ type: 'english' }) }coomponents文件夹里面存放展示的组件(内容是由props传递进来的)这里传递进来的是通过connect包装处理后的属性在reducers文件里面创建代码 const reducer = (state = {}, action) => { switch (action.type) { case 'chinese': return { state, msg: '您好,世界!' } case 'english': return { state, msg: "Hello World!" } default: return state } } 7. `containers`文件里面存放 const chToEng1 = (dispatch,ownProps)=>{ return{ send:()=>{ dispatch(actions.sendShowEnglishMsg()); } } } const ChToEngBtn = connect(null,chToEng1)(ChToEng);

8.入口组件

class App extends React.Component { render() { return ( <div> <HelloWorld msg="Hello World!" /> <ChToEngBtn/> </div> ) } }

9.在入口组件外面包装Provider

const store = createStore(reducer) ReactDom.render( <Provider store = {store}> <App /> </Provider>, document.getElementById('example') );

10.方面查看本人将所有的代码放在一个文件上取名为index.js

/** * @author:水痕 * @time:2017-03-01 18:34 * @email:332904234@qq.com * @version:1.0 * @fileName:index * @title: */ 'use strict'; import React from 'react' import ReactDom from 'react-dom' import { createStore } from 'redux' import {connect,Provider} from 'react-redux' class Hello extends React.Component { render() { return ( <span>{this.props.msg}</span> ) } } class Translate extends React.Component { render() { return ( <button onClick={this.props.sendMsg}>翻译中文</button> ) } } class ChToEng extends React.Component{ render(){ return( <button onClick={this.props.send}>翻译英文</button> ) } } const reducer = (state = {}, action) => { console.log('reducer init state ', state, ' action ', action); switch (action.type) { case 'chinese': return { state, msg: '您好,世界!' } case 'english': return { state, msg: "Hello World!" } default: return state } } const actions = { sendShowChineseMsg: () => ({ type: 'chinese' }), sendShowEnglishMsg: () => ({ type: 'english' }) } const mapHelloStateToProps = (state, ownProps) => { return { msg: state.msg ? state.msg : ownProps.msg } } const HelloWorld = connect(mapHelloStateToProps)(Hello) const mapTranslateDispatchToProps = (dispatch, ownProps) => { return { sendMsg: () => { dispatch(actions.sendShowChineseMsg()) //setTimeout(() => dispatch(actions.sendShowEnglishMsg()), 5000) } } } const chToEng1 = (dispatch,ownProps)=>{ return{ send:()=>{ dispatch(actions.sendShowEnglishMsg()); } } } const TranslateButton = connect(null, mapTranslateDispatchToProps)(Translate) const ChToEngBtn = connect(null,chToEng1)(ChToEng); class App extends React.Component { render() { return ( <div> <TranslateButton /> <HelloWorld msg="Hello World!" /> <ChToEngBtn/> </div> ) } } const store = createStore(reducer) ReactDom.render( <Provider store = {store}> <App /> </Provider>, document.getElementById('example') );