标签: redux

我正在学习JS,我有类似的东西.

//all inside folder reducers

//reducer1.js
export default reducer1

//reducer2.js
export default reducer2

//index.js
import reducer1 from './reducer1'
import reducer2 from './reducer2'
//then combine reducer
export default index

//outside folder reducers
import reducer from './reducers'

既然./reducers只是一个文件夹,里面有3个导出默认的3个文件,我不明白这是怎么回事？它如何知道将导入文件夹中的哪个导出默认值？

谢谢.

Redux已成功存储和更新状态。减速器似乎正常工作。我可以使用this.props.dispatch。但是，当涉及到详细说明该信息时（即，this.props.array我似乎总是不确定）。

减速器：

export default function array(state = {}, action) {
    switch (action.type) {
      case "UPDATE_ARRAY":
        state.array = action.array
        return state;
      default:
        return state;
  }
}

状态感知组件：

  constructor(props) {
    super(props);
    this.state = {
      array: array
    }
  }

-

  self.props.dispatch({
    type: 'UPDATE_ARRAY',
    array: array
  })

-

const mapStateToProps = (state) => {
      return {
        messages: state.messages,
        array: state.array
      };
    };

    export default connect(mapStateToProps)(Component);

当我定义一个空数组时，这似乎只能保存状态btw。这似乎不对，我认为Redux的初衷是一个独立的商店？更新变量似乎会破坏目标。

将不胜感激。

我正在使用这个入门套件,下面的代码可以在这个fork上找到.

柜台组件:

export const Counter = (props) => (
  <div style={{ margin: '0 auto' }} >
    <h2>Counter: {props.counter}</h2>
    <button className='btn btn-default' onClick={props.double}>
      Double (Async)
    </button>
  </div>
)
Counter.propTypes = {
  counter     : React.PropTypes.number.isRequired,
  double : React.PropTypes.func.isRequired,
  increment   : React.PropTypes.func.isRequired
}

export default Counter

而容器组件:

import { connect } from 'react-redux'
import { increment, double } from '../modules/counter'

import Counter from '../components/Counter'

const mapDispatchToProps = {
  increment : () => increment(1),
  double: () => double()
}

const …

我想在用户提交表单时设置表单加载状态（旋转图标，禁用输入），并在操作完成或失败时清除该状态。当前，我将这种状态存储在我的商店中，这涉及创建动作创建者和简化器，由于以下几个原因，这很烦人：

1. 不仅仅是打电话，还需要做更多的工作 this.setState
2. 很难推理
3. 我真的不想在我的商店中存储本地组件状态

本质上，我想在表单组件中执行此操作：

handleFormSubmitted() {
  this.setState({ isSaving: true })
  this.props.dispatchSaveForm({ formData: this.props.formData })
    .finally(() => this.setState({ isSaving: false }))
}

我正在使用React和Redux构建Web应用程序.当我在该页面上设置状态然后通过类似的语句重新访问它时,Redux工作this.props.book.bookTitle,但是,当我导航到另一个页面时,redux丢失它的状态并默认为initialState.这是我的代码:

bookDuck.js:

const BOOK_SELECT = "book/SELECT";
const BOOK_DESELECT = "book/DESELECT";

const initialState = {
  _id: "",
  bookTitle: "",
  bookCover: "",
  bookAuthors: [],
  bookDescription: ""
};

export default function reducer(state = initialState, action) {
  switch(action.type) {
    case BOOK_SELECT:
      return Object.assign({}, action.book);

    case BOOK_DESELECT:
      return initialState;
  }
  return state;
}

export function selectBook(book) {
  console.log(book);
  return {type: BOOK_SELECT, book};
}

export function deselectBook() {
  return {type: BOOK_DESELECT};
}

reducer.js:

import { combineReducers } from 'redux';
import user from './ducks/userDuck';
import …

import { createStore, combineReducers } from 'redux'
const reducer = (state = {}, action) => state
const rootReducer = combineReducers(reducer)
let store = createStore(rootReducer)
export default store

创建商店时会触发警告:

Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

当我尝试使用任何存储方法时,会再次出现此警告.

在我的index.js中,addCoin操作正在运行.

import { addCoin } from './reducer/portfolio/actions'

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

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

store.dispatch(addCoin('bitcoin'));

在store.dispatch调用时,我可以在这里看到更新的状态.

但是,我不想从我的index.js调用调度操作,而是从我的组件中调用.

我的SearchCoin组件:

import React from 'react'
import { connect } from 'react-redux'
import * as R from 'ramda'
import * as api from '../../services/api'
import { addToPortfolio, findCoins } from '../../services/coinFactory'
import { addCoin } from '../../reducer/portfolio/actions'

const mapDispatchToProps = (dispatch) => ({
    selectCoin(coin) {
        return () => {
            dispatch(addCoin(coin))
        } …

在这里我使用postMessage()点击事件将回调发送到action/reducer但是我无法打电话,请帮助我这个我是新来的提前做出反应redux.thank ..

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

    export class AddBlogPost extends Component {
        constructor(state) {
            super();       
        }
        postMessage =()=>{
            this.props.postMessage();
        }
        render() {
            return (
                <form>
                    <div className="imgcontainer">
                    </div>
                    <div className="container">
                        <label><b>Username</b></label>
                        <input type="text" placeholder="Enter Username" name="uname" onChange={(e) => this.userName = e.target.value} />
                        <label><b>Subject</b></label>
                        <input type="text" placeholder="Enter Subject" name="sub" onChange={(e) => this.subject = e.target.value} />
                        <label><b>Comment/Message</b></label>
                        <input type="text" placeholder="Enter Message" name="msg" onChange={(e) => this.message = e.target.value} />
                        <button type="submit" onClick={(event) => …

我遇到了一个错误,我认为是来自webpack的一方.这里是:

index.js:9 Uncaught ReferenceError: global is not defined
    at eval (index.js:9)
    at Object.<anonymous> (bundle.js:2548)
    at __webpack_require__ (bundle.js:622)
    at fn (bundle.js:48)
    at eval (client:1)
    at Object.<anonymous> (bundle.js:2541)
    at __webpack_require__ (bundle.js:622)
    at bundle.js:668
    at bundle.js:671

我的网站是:

import webpack from 'webpack';
import merge from 'webpack-merge';
import path from 'path';
import isDev from 'isdev';
import { Dir } from './src/utils';

const TARGET = process.env.npm_lifecycle_event;

let Config = {
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    path.join(Dir.src, 'client.js'),
  ],
  output: {
    path: path.join(Dir.public, 'build'),
    filename: 'bundle.js',
  },
  target: …

我在单独的文件夹中有两个reducer,用于与此类似的结构中的单独组件:

index.js
       /componentOne
           |_ componentOne.js
           |_ componentOneActionCreator.js
           |_ componentOneReducer.js
       /componentTwo
           |_ componentTwo.js
           |_ componentTwoActionCreator.js
           |_ componentTwoReducer.js

这些Reducers中的每一个都在应用程序中单独工作 - 当我createStore进入index.js(他们import进入)时 - 但如果我尝试使用它们combineReducers(),它们的功能都不起作用(但不会打破UI).我认为这与州有关 - 更多代码供以下参考:

index.js

const rootReducer = combineReducers({
  componentOneReducer,
  componentTwoReducer
});

let store = createStore(rootReducer, applyMiddleware(thunk))

componentOneReducer

export default(state = {}, payload) => {

  let newState = JSON.parse(JSON.stringify(state));

  switch (payload.type) {
    case 'REQUEST_DATA':
        newState.isLoading = true;
        return newState;
    case 'RECEIVE_DATA':
        newState.isLoading = false;
        newState.pageData = payload.payload;
        newState.pageName = payload.payload.pageName;

        return newState
    default: …