Reactjs 学习Redux+；反应还原

我正在与react和react redux一起学习redux。我没有人可以问一些技术和风格方面的问题，所以，我希望社区能帮助我。下面是我的研究项目中的代码片段。问题清单：

1） 如何正确地分派操作？调用

this.props.showDetail（）App

组件中使用code>不是一个好方法，不是吗

2） 这种描述连接的方式正确吗？据我所知，第一个参数是

mapstatetops

函数，第二个参数是

dispatchstatetops

函数

3） 描述动作的方法正确吗？我如何

dispatch（）

在组件中处理参数中的数据？如果你能给我举个例子就好了

4） 你能给我一个关于这个代码的建议或最佳实践吗

另外，如果有任何虚假的时刻，我很抱歉-请，如果你看到任何，写下来

常数

export const SHOW_DETAIL = 'SHOW_DETAIL';
export const LOAD_DETAIL = 'LOAD_DETAIL';
export const HIDE_DETAIL = 'HIDE_DETAIL';

行动

import { SHOW_DETAIL, HIDE_DETAIL, LOAD_DETAIL } from '../constants';

export const showDetail = (isDetailActive) => ({
    type: SHOW_DETAIL,
    isDetailActive
});

export const hideDetail = (isDetailActive) => ({
    type: HIDE_DETAIL,
    isDetailActive
})

export const loadDetail = (img, name, tags, deg, txt) => ({
    type: LOAD_DETAIL,
    img,
    name,
    tags,
    deg,
    txt
});

还原剂

import { SHOW_DETAIL, HIDE_DETAIL, LOAD_DETAIL } from '../constants';
import img from '../media/examples/card-img.png';

const INIT_DETAIL_STATE = {
    isDetailActive: false
}

const INIT_DATA = {
    img: img,
    name: 'Lorem ipsum dolor sit.',
    tags: ['First', 'Second', 'Third', 'Fourth'],
    deg: 30,
    txt: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, maxime voluptatibus totam itaque debitis in eum inventore hic laboriosam cum animi corporis exercitationem minima dolorem sunt dolorum autem modi et iste, vero voluptatem est!'
}

export const manageDetailActivity = (state = INIT_DETAIL_STATE, { type }) => {
    switch (type) {
        case SHOW_DETAIL:
            return {
                isDetailActive: true
            };

        case HIDE_DETAIL:
            return {
                isDetailActive: false
            }

        default:
            return state
    }
}

export const detailData = (state = INIT_DATA, { img, name, tags, deg, txt, type }) => {
    switch (type) {
        case LOAD_DETAIL:
            return [
                ...state, {
                    img,
                    name,
                    tags,
                    deg,
                    txt
                }
            ]
        default:
            return state;
    }
}

根部减压器

import { combineReducers } from 'redux';
import { manageDetailActivity, detailData } from './detail';

const rootReducer = combineReducers({
    manageDetailActivity,
    detailData
});

export default rootReducer;

ContentDescription-我应该调用

loadDetail

action的组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { loadDetail } from '../actions/actionDetail';
import TagsBlock from '../components/TagsBlock';

class ContentDescription extends Component {
    render() {
        const {img, name, tags, deg, txt} = this.props.detail
        return (
            <div className="content-description">
                <div className="cd-inner">
                    <div className="esc">
                        <button></button>
                    </div>
                    <div className="img">
                        <img src={img} alt="error" />
                    </div>
                    <div className="name">{name}</div>
                    <TagsBlock tags={tags}></TagsBlock>
                    <div className="deg">{deg}</div>
                    <div className="txt">{txt}</div>
                </div>
            </div>
        )
    }
}

export default connect(state => ({
    detail: state.detailData
}), { loadDetail })(ContentDescription);

---

有两种开发方法，第一种是在redux中使用钩子，您可以查看官方文档

我将用第二种方式回答您的问题，这是常见的形式：

您可以在此表单中调用任何组件中的操作：

// this is in actions file

/// dispatch actions
export function showDetailFinal(data) {
    return { type: SHOW_DETAIL, isDetailActive: data }
};

/// main action
export function showDetail(data) {
  return dispatch => {
    // In this part you can use axios or other library to do request or other processes.
    // After all the processes you have a response, so you can dispatch the action with your result
    dispatch(showDetailFinal(response));
 };
}

this.props.actions.showDetail（）

您缺少项目操作，如果您使用的是mapDispatchToProps您的道具中有对象操作，如果您想使用它，您需要执行以下步骤

首先，您应该导入操作：

import { firstImportAction, showDetail } from '../actions/actionDetail';

在类组件定义之后，可以定义mapDispatchToProps和mapStateToProps

我建议您按照最佳实践定义此表单中的函数：

class App extends Component {
  // Don´t miss define your constructor function

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
   // your component 
  }
}

const mapStateToProps = (state) => {
  return {
    isDetailActive: state.manageDetailActivity
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators({
      firstImportAction,
      showDetail,
    }, dispatch),
  };
};

在这种形式下更容易使用连接，如：

 export default connect(mapStateToProps, mapDispatchToProps)(App);

最后，我建议您在以下表格中定义您的操作：

// this is in actions file

/// dispatch actions
export function showDetailFinal(data) {
    return { type: SHOW_DETAIL, isDetailActive: data }
};

/// main action
export function showDetail(data) {
  return dispatch => {
    // In this part you can use axios or other library to do request or other processes.
    // After all the processes you have a response, so you can dispatch the action with your result
    dispatch(showDetailFinal(response));
 };
}

在此表单中，您可以将参数传递给操作，管理操作中的信息，并将结果传递给更新还原器

我希望这些信息对你有用。

---

关于

您可以通过使用redux钩子（如

useSelector

和

useDispatch

）使用无

connect

方法的功能组件来轻松实现。是的，它非常有用。谢谢你