小编Cla*_*kie的帖子

我有一组非常简单的反应组件:

• container挂钩到redux并处理动作,存储订阅等
• list 它显示我的项目列表
• new 这是一个向列表中添加新项目的表单

我有一些react-router路由如下:

<Route name='products' path='products' handler={ProductsContainer}>
  <Route name='productNew' path='new' handler={ProductNew} />
  <DefaultRoute handler={ProductsList} />
</Route>

所以显示list或form显示,但不是两者.

我想做的是在成功添加新项目后让应用程序重新路由回列表.

到目前为止,我的解决方案是.then()在异步之后dispatch:

dispatch(actions.addProduct(product)
  .then(this.transitionTo('products'))
)

这是正确的方法吗？或者我应该以某种方式触发另一个动作来触发路线改变？

使用redux更新商店中嵌套数据的最佳/正确方法是什么？

我的商店看起来像这样:

{
    items:{
        1: {
            id: 1,
            key: "value",
            links: [
                {
                    id: 10001
                    data: "some more stuff"
                },
                ...
            ]
        },
        ...
    }
}

我有一对异步操作来更新整个items对象,但是我还有另一对要更新特定links数组的操作.

我的减速机目前看起来像这样,但我不确定这是否是正确的方法:

  switch (action.type) {
    case RESOURCE_TYPE_LINK_ADD_SUCCESS:
      // TODO: check whether the following is acceptable or should we create a new one?
      state.items[action.resourceTypeId].isSourceOf.push(action.resourceTypeLink);
      return Object.assign({}, state, {
        items: state.items,
      });
  }

我正在寻找一个使用Google的Material Design Lite库轻松获得以屏幕为中心的登录表单.

我经历了多次迭代,这是我提出的最好的:

<div class="mdl-cell--12-col mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>

    <div class="mdl-grid mdl-cell--4-col">

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="text" id="username" />
            <label class="mdl-textfield__label" for="username">Username</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="password" id="password" />
            <label class="mdl-textfield__label" for="password">Password</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>
</div>

是否有更好的方法在所有屏幕尺寸上实现居中形式？

与div的 感觉真难吃!

我想在登录后在我的容器"LoginPage"(智能组件)重定向中使用.像这样的东西:

handleSubmit(username, pass, nextPath) {
    function redirect() {
        this.props.pushState(null, nextPath);
    }
    this.props.login(username, pass, redirect); //action from LoginAcitons
  }

用户名和密码从dumb-component到达.

智能组件连接

function mapStateToProps(state) {
  return {
    user: state.app.user
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(LoginActions, dispatch)
}

如何从redux-router添加pushState？或者我错了路？

export default connect(mapStateToProps, {pushState})(LoginPage); //works, but haven't actions

export default connect(mapStateToProps, mapDispatchToProps)(LoginPage); //works, but haven't pushState

export default connect(mapStateToProps, mapDispatchToProps, {pushState})(LoginPage); //Uncaught TypeError: finalMergeProps is not a function

Post
  .findAll({where: {tag: 'news'}, limit: 10})
  .success(function(result) { ... })

如何在我的查询中插入按日期排序的条件而不使用sequelize.querylike

.findAll({ limit: 10, sort: [updatedAt, descending]})

假设我有这样的嵌套组件:

<root />
  <comp1 />
    <comp2 />
      <target id={this.props.id}>
        <div>click me</div>

我想点击目标在root上运行一个函数:

//on root component
this.action = function(id){}

我是否需要在链中的每个组件上手动设置属性,就像在React教程示例中一样？的jsfiddle

<root />
  <comp1 clickHandler={this.action}/>
    <comp2 clickHandler={this.clickHandler}/>
      <target id={this.props.id} clickHandler={this.clickHandler} />
        <div onClick={this.props.clickHandler.bind(this, this.props.id)}>click me</div>

或者是否有一些方法可以像普通DOM一样冒泡事件？

晚上好大家!

我是React和Redux的初学者,所以如果听起来完全愚蠢的话,请耐心等待.我正在尝试学习如何在Redux中执行一些API调用,但这并不是很好.当我控制记录来自动作创建者的请求时,promise值总是"未定义",因此我不确定我是否正确执行此操作.

我的目标是从有效负载对象内的数据中获取信息并将其显示在组件内.过去几天我一直试图让这个工作起来,我完全迷失了.

我正在使用Axios和redux-promise来处理呼叫.

任何帮助将不胜感激.

这是控制台的输出.

动作造物主

import axios from 'axios';
export const FETCH_FLIGHT = 'FETCH_FLIGHT';

export function getAllFlights() {

const request = axios.get('http://localhost:3000/flug');
console.log(request);
  return {
    type: FETCH_FLIGHT,
    payload: request
    };
}

减速器

import { FETCH_FLIGHT } from '../actions/index';

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_FLIGHT:
    console.log(action)
      return [ action.payload.data, ...state ]
    }
   return state;
  }

零件

import React from 'react';
import { Component } from 'react';
import { connect } from 'react-redux';
import …

我正在使用axios promise库,但我认为我的问题更为普遍.现在我循环遍历一些数据并在每次迭代时进行一次REST调用.
每次调用完成后,我需要将返回值添加到对象.在高层次上,它看起来像这样:

var mainObject = {};

myArrayOfData.forEach(function(singleElement){
  myUrl = singleElement.webAddress;
  axios.get(myUrl)
  .then(function(response) {
    mainObject[response.identifier] = response.value;
   });
});

console.log(convertToStringValue(mainObject));

当然发生了什么事情,当我打电话console.log给mainObject它时还没有任何数据,因为axios仍在伸出手.处理这种情况的好方法是什么？

Axios确实有一个all方法和一个姐妹方法spread,但如果你提前知道你将要拨多少个电话,它们似乎是有用的,而在我的情况下,我不知道会有多少循环迭代.

我正在从某个其他组件调度一个动作,并且商店正在使用svgArr属性进行更新,但是通过以下无状态组件connect'ed到商店,它在商店更改时没有得到更新svgArr.

它是如何表现的,因为它是一个无状态的组件？或者我做错了什么？

const Layer = (props) => {
  console.log(props.svgArr);
  return (<div style = {
    {
      width: props.canvasWidth,
      height: props.canvasWidth
    }
    }
    className = {
    styles.imgLayer
    } > hi < /div>);
};

connect((state) => {
  return {
    svgArr: state.svgArr
  };
}, Layer
);

export default Layer;

所以,我看到一个错误,redux-promise给我回复错误:true,以及有效负载,但是一旦它击中了reducer ...对我来说,解耦请求和错误条件有点奇怪,似乎不当.当使用axios w/reduc-promise(中间件)时,还有一种处理错误情况的有效方法..这里是我所拥有的要点..

in action/
const request = axios(SOME_URL);

return {
   type: GET_ME_STUFF,
   payload: request
}

in reducer/
  const startState = {
     whatever: [],
     error: false
  }

  case GET_ME_STUFF:
     return {...state, startState, {stuff:action.payload.data, error: action.error? true : false}}

等...然后我可以处理错误..所以,我的api调用现在被分成两个单独的区域,这似乎是错误的......我必须在这里找到一些东西.我会想/在/ actions中我可以传递一个回调来处理一个新的动作等等.但是不能拆分它.