标签: react-redux

我在整个代码库中使用async/await.因此,我的api调用由异步函数定义

async function apiFetchFoo {
  return await apiCall(...);
}

我想从我的传奇代码中调用这个函数.好像我不能这样做:

// Doesn't work
function* fetchFoo(action) {
  const results = await apiFetchFoo();
  yield put({type: "FOOS_FETCHED_SUCCESSFULLY", foos: results});
}

但是,这确实有效,并且与redux saga文档相匹配:

// Does work
function* fetchFoo(action) {
  const results = yield call(apiFetchFoo);
  yield put({type: "FOOS_FETCHED_SUCCESSFULLY", foos: results});
}

这是使用Redux Saga和async/await的正确方法吗？在saga代码中使用这个生成器语法,在其他地方使用async/await模式是标准的吗？

不知道为什么我会收到以下错误.

我只是在设置我的商店,行动和减速器,我还没有打电话给任何东西.

预期

App运行正常,Redux状态未更新

结果

import React from 'react'
import ReactDOM from 'react-dom'

import { createStore, applyMiddleware, compose } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import reducer from './reducer'

import App from './App'
import css from './coinhover.scss'

const element = document.getElementById('coinhover');

const store = createStore(reducer, compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));

ReactDOM.render(
    <Provider store={ store }>
        <App />
    </Provider>, element);

import { combineReducers } from 'redux'
import { coins } …

OP编辑:如果有其他人遇到这个:该应用程序是使用create-react-app创建的,它限制导入到src文件夹中.但是,如果将react-scripts升级到v1.0.11,则允许您访问package.json.

我想在我的应用程序中从package.json获取版本号.

我已经尝试过这些建议,但是没有一个能够工作,因为我无法从src文件夹外部访问package.json(可能是由于React,我是新手).移动的package.json到SRC那么意味着我不能跑npm install,npm version minor和npm run build从我的根文件夹.我尝试过使用process.env.npm_package_version但结果是未定义的.

我正在使用Jenkins,我还没有设置它来提交提交,但我唯一的想法是从GitLab中的标签获取版本,但我不知道如何做到这一点,它会给回购添加不必要的依赖,所以我真的想找到一个替代方案.

编辑:我的文件结构如下:

--> RootAppFolder
    |--> build
    |--> node_modules
    |--> public
    |--> src
         |--> Components
              |--> Root.js
    |
    |--> package.json

所以要从Root.js访问package.json我必须这样做import packageJson from './../../package.json',然后我收到以下错误:

./src/components/Root.js

找不到模块:您试图导入位于项目src /目录之外的./../../package.json.不支持src /之外的相对导入.你可以在src /中移动它,或者从项目的node_modules /中添加一个符号链接.

我是React/Redux的新手并且遇到状态问题.

TrajectContainer.jsx

class TrajectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            trajects: props.trajects,
            onClick: props.onClick
        };
    }

    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps', nextProps);
        this.setState(nextProps);
    }

    render() {
        // When the componentWillReceiveProps is not present, the this.state will hold the old state
        console.log('rerender', this.state);
        return (<div className="col-md-6">
            <h2>Trajects</h2>
            <button className="btn btn-primary" onClick={this.state.onClick}>Add new Traject</button>
            {this.state.trajects.map(traject => <Traject traject={traject} key={traject.name}/>)}
        </div>)
    }
}

const mapStateToProps = function (store) {
    console.log('mapToStateProps', store);
    return {
        trajects: store.trajects
    };
};

const mapDispatchToProps = function (dispatch, …

我有一些React.js的问题.这是我的代码:

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './containers/App';
import todoApp from './reducers';

let store = createStore(todoApp);
let rootElement = document.getElementById('root');

React.render(
    <Provider store={store}>
        {() => <App />}
    </Provider>,
    rootElement
);

并运行页面,它说:

propType失败:children提供的prop无效Provider,预期单个ReactElement

这是我相关的已安装节点模块的列表:

• 反应15.0.1
• react-redux 4.4.5
• redux 3.4.0

实际上,我目前正在学习与Redux的React,所以我很难怎么做.我只是按照网站上的教程(我可以提供一个链接,但它不是英文)但它只是没有使用该错误消息.当我搜索时,有人说反应和react-redux的升级版本,但我安装了最新版本.任何建议都会非常感激.

在创建 React 应用程序时，如果我使用 hook useSelector，我需要遵守 hooks 调用规则（只能从功能组件的顶层调用它）。如果我使用mapStateToProps，我会在道具中获得状态，我可以在任何地方使用它而没有任何问题......同样的问题useDispatch

与使用钩子相比，除了节省代码行之外，使用钩子还有什么好处mapStateToProps？

将多个文件的内容合并为一个以作为Redux的配置后,我遇到了错误配置的Redux的问题.

如何解决store,同时将其保存在一个文件中？

未处理的JS异常:无法在"Connect(App)"的上下文或道具中找到"store".将根组件包装在a中,或者将"store"显式传递为"Connect(App)"的prop.

'use strict';
import React, { Component } from 'react';
import { createStore, applyMiddleware, combineReducers, bindActionCreators } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import * as screenActions from './redux/actions/screenActions';

import * as reducers from './redux/stores/reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

import RootContainer from './redux/views/containers/rootContainer';

class App extends Component {
  render() {
    const { state, actions } = this.props;
    return (
      <Provider store={store}> …

我正试图从我的智能组件中发出一个动作.我已经尝试使用了mapDispatchToProps,this.props.dispatch(actions.getApplications(1))但是两者都没有绑定动作props.

我不确定mapStateToProps是不是因为我不包括在内？我试图包括它,但它也没有用.

感谢任何帮助,我为下面的代码块的长度道歉.

import classNames from 'classnames';
import SidebarMixin from 'global/jsx/sidebar_component';

import Header from 'common/header';
import Sidebar from 'common/sidebar';
import Footer from 'common/footer';
import AppCard from 'routes/components/appCard';
import { getApplications } from 'redux/actions/appActions';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import actions from 'redux/actions';
import { VisibilityFilters } from 'redux/actions/actionTypes';


class ApplicationContainer extends React.Component {
    constructor(props){
    super(props)

    this.state = {
      applicants: []
    }

    this.onDbLoad = this.onDbLoad.bind(this)

  } …

我在react-redux网站上遇到了一个重复模式:一个组件显示来自web api的数据,它应该在加载时自动填充,无需任何用户交互.

我想从容器组件启动异步提取,但据我所知,唯一的方法是从显示组件中的生命周期事件.这似乎使得无法将所有逻辑放在容器中,只使用哑无状态功能组件进行显示.

这意味着我不能将无状态功能组件用于任何需要异步数据的组件.这似乎不对.

似乎"正确"的方法是以某种方式从容器启动异步调用.然后,当调用返回时,状态将被更新,容器将获得新状态,然后将其传递给其无状态组件mapStateToProps().

进行异步调用mapStateToProps和mapDispatchToProps(我的意思是实际调用异步函数,而不是将其作为属性返回)没有意义.

所以我最终做的是将异步调用放在一个refreshData()公开的函数中mapDispatchToProps(),然后从两个或多个React生命周期方法中调用它:componentDidMount and componentWillReceiveProps.

有没有一种干净的方法来更新redux存储状态而不在每个需要异步数据的组件中放入生命周期方法调用？

我是否应该将这些调用放在组件层次结构的更高位置(从而减少此问题的范围,因为只有"顶级"组件才需要监听生命周期事件)？

编辑:

就这样,我对connect()ed容器组件的意思没有任何混淆,这是一个非常简单的例子:

import React from 'react';
import { connect } from 'react-redux';
import {action} from './actions.js';

import MyDumbComponent from './myDumbComponent.jsx';

function mapStateToProps(state)
{
  return { something: state.xxxreducer.something  };
}

function mapDispatchToProps(dispatch)
{
  return { 
       doAction: ()=>{dispatch(action())}
  };
}

const MyDumbComponentContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyDumbComponent);

// Uh... how can I hook into to …

action.js

export function getLoginStatus() {
  return async(dispatch) => {
    let token = await getOAuthToken();
    let success = await verifyToken(token);
    if (success == true) {
      dispatch(loginStatus(success));
    } else {
      console.log("Success: False");
      console.log("Token mismatch");
    }
    return success;
  }
}

component.js

  componentDidMount() {
    this.props.dispatch(splashAction.getLoginStatus())
      .then((success) => {
        if (success == true) {
          Actions.counter()
        } else {
          console.log("Login not successfull");
        }
     });
   }

但是,当我用async/await编写component.js代码时,我得到此错误:

Possible Unhandled Promise Rejection (id: 0): undefined is not a function (evaluating 'this.props.dispatch(splashAction.getLoginStatus())')

component.js

  async componentDidMount() {
     let success = …