主页 / 问题 / 744351
Accepted
Dmitry Preeternal
Asked:2020-11-14 15:34:42 +0000 UTC2020-11-14 15:34:42 +0000 UTC

从 redux 存储中检索变量

  • 772

下午好，您需要在计算组件中从商店中提取道具，并将计算结果与它一起传递给应用程序

应用程序.js

    import React, { Component } from 'react'; 
    import { connect } from 'react-redux';
    import principalChanged from './src/actions';
    import  Input 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}                      
                />
              `Текущее состояние переменной: ${this.props.principal}`{/n}
              `Новая переменная: ${principal2}`
              `Новая переменная: ${principal3}`
            </Card>
        );
       }
       }
const mapStateToProps = state => { 
   return { 
      principal: state.form.principal
   }; 
}; 
export default connect(mapStateToProps, { 
    principalChanged 
})(App);

计算.js

// вызов переменной principal из store
// каким то образом
export const principal2 = (principal) => {     
     return ( { principal * 2 } ); // вычисления 
}; 

export const principal3 = (principal) => {     
     return ( { principal / 2 } ); // вычисления
};
redux

1 个回答

  1. Best Answer

    无法将 Redux (react-redux) 连接到函数。您应该始终通过connect将其连接到组件。它是如何在 App.js 组件中完成的。

    我一直在寻找的是所谓的选择器或选择器逻辑。您只需要调用连接（connect）中的函数（calculate.js），从而将所需的计算值（props）注入到组件中。无需使用 mergeProps。

    解决方案在这里

    替代选项（在上面链接的评论中描述）：

    应用程序.js

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

      class App extends Component {
        onPrincipalChange(text) {           
          this.props.principalChanged(text); 
        }
      render() {
      const { principal2, principal3 } = calculate(this.props.principal);
        return ( 
            <Card>
               <Input 
                 placeholder="Placeholder" 
                 label="Label" 
                 onChangeText={this.onPrincipalChange.bind(this)} 
                 value={this.props.principal}                      
                />
               Текущее состояние переменной: ${this.props.principal}{/n}
               Новая переменная: ${principal2}
               Новая переменная: ${principal3}
            </Card>
        );
       }
       }
const mapStateToProps = state => { 
   return { 
      principal: state.form.principal
   }; 
}; 
export default connect(mapStateToProps, { 
    principalChanged 
})(App);

    calculate.js

    export const calculate = (principal) => {
   const result = {};
   result.principal2 = principal * 2;
   result.principal3 = result.principal2 / 4;   
   return result;
};
    • 1

相关问题