标签: redux

在查看一个本地redux示例项目时,我提出了很多问题.有人能指出我将解释那些高级语法糖的文件吗？

例如:

import React, { AppRegistry } from 'react-native';

为什么AppRegistry在{},与React的导入和AppRegistry的导入有什么功能差异？

这个import语句会发生什么:

import * as types from '../actions/actionTypes';

它们会作为阵列导入吗？

另一件事:

  render() {
    const { state, actions } = this.props;
    return (
      <Counter
        counter={state.count}
        {...actions} />
    );
  }

将什么传递给Counter-Component？动作变量来自哪里？它是从this.props中删除的,但是在调用者中没有任何东西会通过.另外:传播运营商

<Counter/>

,这会附加另一个参数,因为它们会以逗号分隔的变量名称传递吗？

另一件事:

export default function counter(state = initialState, action = {}) {
  switch (action.type) {
    case types.INCREMENT:
      return {
        ...state,
        count: state.count + 1
      };

return语句真的会返回什么？如果扩展运算符已经包含一个名为"count"的变量,那么扩展运算符和一个名为"count"的属性是否会合并在一起？

此外,该项目在reducers文件夹中包含一个名为index.js的简单文件,其中包含以下内容:

import counter from './counter';

export {
  counter
};

是否有意义？

我问,因为这个项目被命名为使用redux in react native的示例应用程序,但我认为它是为了学习目的而完成的.我不确定,如果结构上的一切都有意义的话.但我真正的问题是澄清我在那里找到的这些语法糖元素

我正在学习react/redux并且有两个主要状态的应用程序:

1. 一系列物品
2. 包含这些项的用户指定过滤器的对象

我有三个功能/动作createFilter,updateFilter以及deleteFilter该修改#2的状态.我有一个动作filterItems,根据#2的状态修改#1.因此,只要#2发生变化,就需要调度此操作.

这是我正在使用的组件:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { createFilter } from '../actions/actions'
import { updateFilter } from '../actions/actions'
import { deleteFilter } from '../actions/actions'
import { filterItems } from '../actions/actions'

class ItemList extends Component {

 createFilter(input) {
       this.props.createFilter(input)
       this.props.filterItems()
    }

    updateFilter(input) {
       this.props.updateFilter(input)
       this.props.filterItems()
    }

    deleteFilter() {
       this.props.deleteFilter()
       this.props.filterItems()
    }

    ...
    // Render method …

我试图在我的Reducer中使用spread属性,但它回来时语法错误无效.我的构建支持使用spread运算符,因为我只在reducers中得到错误.

auth_types.js

export const AUTH_USER = 'AUTH_USER'
export const UNAUTH_USER = 'UNAUTH_USER'

auth_actions.js

import { AUTH_USER, UNAUTH_USER } from './auth_types'



   export function signinUser({ email, password }) {
      return function(dispatch) {
        axios.post(`${ROOT_URL}/signin`, { email, password })
          .then(response => {
            dispatch({ type: AUTH_USER })

            browserHistory.push('/feature')
          })
      }
    }

reducer.js

import { AUTH_USER, UNAUTH_USER } from '../actions/auth_types'

export default function(state = {}, action) {
  switch(action.type) {
    case AUTH_USER:
      return { ...state, authenticated: true }
    case UNAUTH_USER:
      return { ...state, authenticated: false }
  } …

我正在尝试将immutableJS添加到Mern.io. 当我尝试从我的帖子列表中删除帖子然后将其设置回我的状态时,状态不会更新.

case ActionTypes.DELETE_POST :
    const removeArray = state.get('posts')
              .filter((post) => post._id !== action.post._id)
    console.log(removeArray.length)
    state.set('posts', removeArray)
    console.log(state)
    return state;

在这个例子中,如果我有一个5的数组,我应该能够将其过滤掉,然后使用新数组再次设置"posts".我不明白的是我可以从数组中删除对象,removeArray将比state.posts少一个.但是当我控制日志状态时它是一样的.我错过了什么？

我使用redux表单收到错误.它说我的文件名"搜索只是可读的".这是一个还原形式问题还是其他一些问题？它与连接有关吗？现在我只能使用旧版的表格

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
var Select = require('react-select');
import {fetchAllEmails, searchUsers} from '../actions/searchAction';
import {getDashBoardDataFromEmail, clearUserState} from '../actions/dashboardAction';
var LocalToken = localStorage.getItem('token');
import _ from 'lodash';
import {reduxForm} from 'redux-form';


const Search = React.createClass({

  contextTypes:{
    router: React.PropTypes.object.isRequired
  },

  getInitialState: function(){
    return {
      value:'xyz'
    }
  },

  componentWillMount: function(){
    this.props.fetchAllEmails(LocalToken);

  },

  handleChange: function(e){
    this.props.getDashBoardDataFromEmail(LocalToken,e)
    this.context.router.push('/dashboard')
  },

  handleSearchChange(e) {
     this.setState({ value: e.target.value });
   },

   handleInputSubmit(){
     console.log('hello')
   },

  render(){
    const {fields: {someFormField, handleInputSubmit} }= this.props; …

假设我有组件FooList和DoThingWithFooModal.两者都是mountend,两者都可以foos从api 请求.

foos看起来像这样的状态:

foos: {
  state: 'LOADING' | 'OK' | 'ERROR',
  items: [foo1, foo2, ...],
}

如果foos.state是'LOADING',这两个组件显示<Loader />.

我想要实现的是,Loader 只显示所请求 的组件foos- 模式或列表.

(在我的具体情况下,列表隐藏在模态背后,所以它不是真正的问题.但是,我想找到解决这个问题的好方法.)

我提出的一件事是在foos状态中存储更多上下文:

foos: {
  ...foos,
  requestedBy: 'DoThingWithFooModal',
}

不幸的是,这增加了更多的复杂性(1.为可能的请求者引入常量,2.决定是否显示加载器)并且看起来不太好.

还有哪些其他解决方案？

我正在创建一个使用Redux架构处理状态的组件(是的,根据定义,这可能很糟糕,因为组件应该将状态委托给应用程序,但无论如何).

该组件接受不同的道具.当我必须处理回调时,我的问题出现了.让我们举一个实际的例子来更好地描绘这一点.

假设我们需要一个像这样的组件<App onSubmit={() => {}} />.

我们可以在组件加载时创建一个商店,然后所有内部组件都可以调度操作/订阅更改/等.

尝试可以是一个叫做的动作submit().通过这种方式,商店将知道有适用的更改,因此任何订阅者都知道并且有人会在提交回调中调用此方法.

所以代码看起来像:

class App extends Component {
  constructor (props) {
     super(props)
     this.subscriber = this.subscriber.bind(this)
  }
  componentWillMount() {
    this.store = createStore()
    this.store.subscribe(this.subscriber)
  }
  subscriber (action) {
    if (action.type === 'submit')
      this.props.onSubmit()
  }
  render () {
    return (
      <Provider store={this.store}>
         <FooComponent />
      </Provider>
    )
  }
}

问题在于,尽管subscriber在调度的每个操作上调用,但订阅者无法知道调度的最后一个操作是什么.所以没有办法知道什么时候打电话onSubmit.

• 我们怎样才能subscriber …

我使用Normalizr从不同的API端点获得相同的响应形状.

const post = new Schema('posts');
const posts = arrayOf('post');

const listResponse = [
  {id: 1, text: 'post one'},
  {id: 2, text: 'post two'},
];
normalize(listResponse, posts);

/*  
{
  entities: {
    posts: {
      1: {id: 1, text: 'post one'},
      2: {id: 2, text: 'post two'}
    }
  },
  result: [1, 2]
}
*/


const singleResponse = {id: 1, text: 'post one'};
normalize(singleResponse, post);

/*
{
  entities: {
    posts: {
      1: {id: 1, text: 'post one'}
    }
  },
  result: 1
}
*/ …

我有一个React应用程序渲染客户端,我通过以下方式处理身份验证:

1. 加载后,应用程序向后端发出一个AJAX请求,基本上询问用户的会话是否有效;
2. 它使用服务器的响应更新应用程序的状态;
3. 它相应地呈现"/"路由(如果会话无效则为主页,如果有效则为仪表板).

(也许在前端应用程序中有更好的解决方案来解决这个问题,如果你有想法,我会全力以赴)

这很好用,但是将服务工作者引入混合并试图将应用程序变成离线优先的渐进式Web应用程序似乎......很复杂.

一方面,如果我不缓存"我登录了吗？" 请求和应用程序处于离线状态,应用程序将始终呈现主页.另一方面,如果我确实缓存了AJAX请求,用户最终会显示一个空的仪表板,因为他们的会话已经过期,服务器将丢弃403.

有没有办法有效地处理这个问题？

问题很简单，如何将Redux-observable与EventSource一起使用？

使用RxJs就像：

const observable = Observable.create(observer => {
  const eventSource = new EventSource('/model-observable');
  return () => {
    eventSource.close();
  };
});

observable.subscribe({
  next: data => {
    this.zone.run(() => this.someStrings.push(data));
  },
  error: err => console.error('something wrong occurred: ' + err)
});