react-redux 是使用 redux 开发 react 时使用的一个插件, 另外插一句, redux 不是 react 的产品, vue 和 angular 中也可以使用 redux; 下面简单讲解, 如何使用 react-redux 来开发 react.
描述
这个插件可以让我们的 redux 代码更加的简洁和美观. 我假设你已经有一个使用 create-react-App 创建的一个可以显示 hello world 的 react 环境, 并且已经安装来 redux.
注意: 如果是刚使用 create-react-App 创建的, 需要运行 NPM run eject 弹出个性化设置, 这样就可以自定义配置
安装
NPM i react-redux --save
使用
react-redux 提供了两个重要的接口: Provider,connect, 使用了这个插件, react-redux 的 subscribe 和 dispatch 就可以忘记来, 它们就用不着了.
代码结构
- //index.JS
- import React from 'react';
- import ReactDOM from 'react-dom';
- import './index.CSS';
- import App from './App';
- import registerServiceWorker from './registerServiceWorker';
- import { createStore, applyMiddleware } from 'redux';
- import thunk from 'redux-thunk';
- import { reducer } from './index.redux';
- import { Provider } from 'react-redux'
- const store = createStore(reducer, applyMiddleware(thunk));
- ReactDOM.render(
- <Provider store={store}>
- <App />
- </Provider>,
- document.getElementById('root')
- );
- registerServiceWorker();
Provider 中应用的最外层, 把 store 传给它, 只使用一次
- //App.JS
- import React, { Component } from 'react';
- import { addCreator, removeCreator, addAsync } from './index.redux';
- import { connect } from 'react-redux';
- class App extends Component {
- render() {
- return (
- <div className="App">
- <h1 > 现在有美女 {this.props.num} 个.</h1>
- <button onClick={this.props.addCreator}>add</button>
- <button onClick={this.props.removeCreator}>remove</button>
- <button onClick={this.props.addAsync}>addAsync</button>
- </div>
- );// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- }// 面向 1-3 年前端人员
- }// 帮助突破技术瓶颈, 提升思维能力
- // 定义把 state 中哪个属性放到 props 中
- function mapStateToProps(state) {
- return { num: state }
- }
- // 定义把哪些方法放到 props 中
- const actionCreators={ addCreator, removeCreator, addAsync };
- //connect 其实就是一个高阶组件, 把 App 传进去, 返回一个新的 App 组件
- App = connect(mapStateToProps, actionCreators)(App);
- export default App;
connect 负责从外部获取组件需要的参数. 通过 connect 定义后, 放到 props 中的属性和方法就可以直接通过 this.props 来获取.
下面是 reducer 的定义.
- //react.redux.JS
- const Add = 'addGirl', Remove = "removeGirl";
- export function reducer(state = 0, action) {
- switch (action.type) {
- case Add:
- return state + 1;
- case Remove:
- return state - 1;
- default:
- return 10;// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- }// 面向 1-3 年前端人员
- }// 帮助突破技术瓶颈, 提升思维能力
- export function addCreator() {
- return { type: Add };
- }
- export function removeCreator() {
- return { type: Remove };
- }
- export function addAsync() {
- return (dispatch, getState) => {
- setTimeout(function () {
- dispatch(addCreator());
- }, 1000);
- }
- }
使用装饰器优雅的写 Conect
首先需要安装 babel-plugin-transform-decorators-legacy, 并在 package.JSON 中配置.
安装
NPM i babel-plugin-transform-decorators-legacy --save-dev 这个只是开发使用, 所以安装到 --save-dev
配置
配置 babel 的 plugins 属性
- "babel": {
- "presets": [
- "react-app"
- ],
- "plugins": [
- ["transform-decorators-legacy"]
- ]// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- }
修改原来写法
使用 @connect 来重新定义, 写到 class 的上头即可.
- //App.JS
- @connect((state) => ({
- num: state
- }),{
- addCreator, removeCreator, addAsync
- })
- class App extends Component {
- // function mapStateToProps(state) {
- // return {
- num: state
- }
- //
- }// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- // App = connect(mapStateToProps, {
- addCreator, removeCreator, addAsync
- })(App);
VS Code 装饰器提示 "experimentalDecorators" 的解决办法
点击 Visual Studio Code 左下角的配置按钮 (或者文件> 首选项>配置, Windows 环境), 打开用户设置窗口, 在搜索框内输入 "experimentalDecorators", 找到选项, 如下:
- "javascript.implicitProjectConfig.experimentalDecorators": false
- // 改成 true 就可以了
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/d92ce6819ed26b019e0209d00a169089.html