Question

我需要在计算组件中从商店中提取道具，并将计算结果传递到 app 。我刚开始使用redux。

app.js

    import React, { Component } from 'react'; 
    import { connect } from 'react-redux';
    import principalChanged from './src/actions';
    import { Input, Card } from './src/components/common';
    import  { principal2, principal3 } from './src/components/calculate';

      class App extends Component {
        onPrincipalChange(text) {           
          this.props.principalChanged(text); 
        }
      render() {
        return ( 
            <Card>
               <Input 
                 placeholder="Placeholder" 
                 label="Label" 
                 onChangeText={this.onPrincipalChange.bind(this)} 
                 value={this.props.principal}                      
                />
              `Current state of the variable: ${this.props.principal}`{/n}
              `New variable: ${principal2}`
              `New variable: ${principal3}`
            </Card>
        );
       }
       }
const mapStateToProps = state => { 
   return { 
      principal: state.form.principal
   }; 
}; 
export default connect(mapStateToProps, { 
    principalChanged 
})(App);

calculate.js

// call the { principal } variable from the store
// somehow 
// maybe I should use mergeProps
export const principal2 = (principal) => {     
     return ( { principal * 2 } ); // calculating 
}; 

export const principal3 = () => {     
     return ( { principal2 / 4 } ); // calculating
};

我不知道如何将state.principal.props连接到 calculate.js 。也许我应该使用mergeProps？

Answer 1

您需要使用actions和reducers

基本上，在代码的某些部分，您需要发送一个操作并使用reducer解决它。

因此，您需要创建动作文件和reducer文件以进行求解计算，并使用根减速器导入此减速器以及您将拥有的另一个减速器。

Obs。：考虑使用一些eslint规则来改进你的代码。

例如：

const mapStateToProps = state => { 
   return { 
      principal: state.form.principal
   }; 
};

可能是：

const mapStateToProps = state => ({ 
   principal: state.form.principal 
});

状态类可以是无状态类：

const App = ({ principal, principalChanged }) => ( 
            <Card>
               <Input 
                 placeholder="Placeholder" 
                 label="Label" 
                 onChangeText={principalChanged} 
                 value={principal}                      
                />
              `Current state of the variable: ${principal}`{/n}
              `New variable: ${principal2}`
              `New variable: ${principal3}`
            </Card>
        );

Answer 2

您无法将Redux（resp.alid-redux）存储连接到某个功能。您必须始终通过连接将其连接到组件。您在App组件中正确使用的。

您正在寻找的内容称为选择器或类似选择器的逻辑。只需在连接中调用转换函数，从而在组件中注入所需的值。无需使用mergeProps。

以下是如何操作，代码应该是可以提取的：

<强> App.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux';
import principalChanged from './src/actions';
import { Input, Card } from './src/components/common';
import { principal2 as principal2Selector, principal3 as principal3Selector } from './src/components/calculate';

class App extends Component {

  onPrincipalChange(text) {           
    this.props.principalChanged(text); 
  }

  render() {
    const { principal, principal2, principal3 } = this.props

    return ( 
      <Card>
        <Input 
          placeholder="Placeholder" 
          label="Label" 
          onChangeText={this.onPrincipalChange.bind(this)} 
          value={principal}                      
        />
        Current state of the variable: {principal}
        New variable: {principal2}
        New variable: {principal3}
      </Card>
    );
  }
}



const mapStateToProps = state => { 
  const principal = state.form.principal 

  return {
    principal,
    principal2: principal2Selector(principal),
    principal3: principal3Selector(principal),
  } 
}; 

export default connect(mapStateToProps, { 
    principalChanged 
})(App);

请注意，我重命名了 principal2 和 principal3 导入，而不是将变量与函数/选择器混淆。

import { principal2 as principal2Selector, principal3 as principal3Selector } from './src/components/calculate';

<强> calculate.js

export const principal2 = (principal) => {     
     return (principal * 2); // calculating 
}; 

export const principal3 = (principal) => {     
     return (principal2(principal) / 4); // calculating
};

Answer 3

你到底想要达到什么目的？ principal2和principal3应该是组件还是函数？它们是从“组件”目录导入的，所以我假设它们是组件？如果是这样，您首先需要返回任何种类或组件，而不仅仅是一个数字。像：

export const principal2 = ({ value}) => {     
   return <span>{ value * 2 }</span>; // calculating 
};

然后使用如下组件：

New variable: <principal value={anyNumber} />

如果是“普通”功能，请使用如下原则：

New variable: {principal(anyNumber)}

顺便说一下：你不需要把字符串放在这些小引号“`”中。你可以写

New variable: {principal3}

在组件的返回值中。

从redux存储中提取变量

3 个答案: