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

时间：2022-05-12 05:51:23

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

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

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

  1. 安装npm install react-redux --save-dev到你的工程项目中
  2. Provider这个属性的使用:我们相当于在最顶层的组件中外套这个属性就可以。传递的参数store,那么在所有的组件中都可以使用到store 
//案例:
ReactDom.render(
<Provider store = {store}>
<App />
</Provider>,
    document.getElementById('example')
);
  1. 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);
//大致理解跟上面的一样的

二、开发项目

  1. 项目基本搭建，有不清楚的可以查看下本人简单介绍的关于ES6+React+webpack的环境搭建文章
  2. 增加依赖包npm install react-redux redux --save-dev
  3. 创建文件目录containers(存放内容组件)、coomponents (存放展示组件)、actions、reducers等别的文件夹
  4. 在actions文件夹中创建文件，代码如下:
    const actions = {
    sendShowChineseMsg: () => ({ type: 'chinese' }),
    sendShowEnglishMsg: () => ({ type: 'english' })
    }
  5. coomponents文件夹里面存放展示的组件(内容是由props传递进来的)这里传递进来的是通过connect包装处理后的属性
  6. 在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')
);
标签：

相关文章