React-redux初识

最近学习React相关的知识,项目中主要使用了react-redux这个库,网上找了一些资料,最后还是发现阮一峰老师的React系列教程对于新手来说是最友好的,强烈推荐。

个人觉得react-redux是一个非常好用的粘合层,将react和redux更方便快捷的结合到了一起,将本来需要自己零散管理的ActionStoreReducer三者结合到了一起,下面直接上代码演示:

环境依赖:

npm install -g create-react-app

这个工具可以快速的构建一个react工程,免去很多像我这样的新手不知如何下手。

直接通过 create-react-app hello-react构建一个工程,在hello-react项目目录中,在src目录下就是项目代码 了,我是直接删除了src下默认生成的文件,新建自己的index.js

// demo 取自阮老师github
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";

1. 定义UI组件

UI组件不负责数据逻辑的处理,只负责对数据进行渲染

// Counter 组件 实现加1操作
// React 组件编写格式都需继承 父组件Component
class Counter extends Component {
  render() {
    // 取组件属性,用来渲染页面和操作函数
    const { value, onIncreaseClick } = this.props
    return (
      // value 即加1后的值
        <span>{value}</span>
      <button onClick={onIncreaseClick}>Increase</button>
    )
  }
}

// Counter属性,定义属性数据类型
Counter.propTypes = {
  value: PropTypes.number.isRequires,
  onIncreaseClick: PropTypes.func.isRequired
}

2. 定义Action

const increaseAction = { type: "increase" }

3. 定义Reducer

function counter(state = { count: 0}, action) {
  // reducer函数接受两个参数,一个是当前state,另一个是action,函数返回一个新的state,不可更改旧的state
  const count = state.count
  switch(action.type) {
    case "increase":
      return { count: count+1 }
    default:
      return state
  }
}

4. 定义Action

const store = createStore(counter)

5. 定义mapStateToProps和mapDispatchToProps

  • mapStateToProps主要是将当前的State转化成对应UI组件的映射

  • mapDispatchToProps是将UI组件的操作映射成action以此触发store的变化

function mapStateToProps(state) {
  return {
    value: state.count
  }
}

function mapDispathToProps(dispatch) {
  return (
  	onIncreaseClick: () => dispatch(increseAction)
  )
}

6. 最后串起来

// react-redux提供的高阶函数connect
const App = connect(mapStateToProps, mapDispatchToProps)(Counter)

ReactDOM.render(
  // Provider 对store进行传递
	<Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
)

yarn start

Done~