标签: redux-thunk

我想了解Redux并遇到一些困难.

我理解combineReducer的概念,即....

var reducer = combineReducers({
    user: userReducer,
    products: productsReducer
})

但是,如果我有数千种产品,只能在产品页面上找到.我不明白为什么我需要在root上加载它们; 对我而言,除非用户访问产品页面,否则这将减慢应用程序的初始启动速度.

这是与redux的关系吗？

我正在尝试将Redux集成到我的React项目中.目前我没有使用任何Flux框架.

我的应用程序从API获取一些数据并以一种漂亮的方式显示它,如下所示:

componentDidMount() {
  getData();
}

getData() {
  const self = this;

  ajax({
    url: apiUrl,
  })
  .success(function(data) {
    self.setState({
      data: data,
    });
  })
  .error(function() {
    throw new Error('Server response failed.');
  });
}

在阅读有关Redux的文章时,我已经确定了两种可行的方法,可用于处理在商店中存储我的成功数据:

• 使用异步中间件,或
• ADD_DATA从ajax函数的成功回调调度操作

但我不确定哪种方法更好.

回调中的调度操作听起来很容易实现和理解,而异步中间件更难以向不习惯使用函数式语言的人解释.

几个星期以来,我一直在努力解决这个问题.我终于放弃了并在此寻求帮助,因为我显然没有做正确的事情.我有一个使用redux和redux-thunk的React.js应用程序.我只是试图让我的组件容器启动数据加载,但是在数据从获取请求返回之前不会呈现.我知道这看起来很简单.这就是我所做的:

容器组件

'use strict';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchActivePlayer } from '../actions/index';
import PlayerDetails from '../components/players/player-detail';
import Spinner from '../components/common/spinner/index';
import store from '../store';

export default class PlayerDetailContainer extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.fetchActivePlayer(this.props.params.player_slug)
    }

    render() {
        if (!this.props.activePlayer.activePlayer) {
            return (
                <Spinner text="Loading..." style="fa fa-spinner fa-spin" />
            );
        }

        return (
            <PlayerDetails 
                player={ this.props.activePlayer.activePlayer } 
            />
        );
    }
}

function mapStateToProps(state) {
    return { …

我正在尝试创建一个简单的消息墙,其中<PostList />包含一个显示<Post />组件列表的容器.

 {posts.map(function (post: any) {
                return <Post key={post.postid} post={post} />;
            })}

我将一个帖子传递给Post组件,该组件具有在<Avatar />其中显示用户profile_pic 的组件,否则它将显示一个微调器.

我的问题是我如何允许组件在屏幕上显示,一旦加载图像,用检索到的图像替换微调器？

我目前有以下Reducers和Actions:

用户减速机:

export default function(state = INITIAL_STATE, action : any){
    switch(action.type){
        case FETCH_USER_LOADING:
            return Object.assign({}, state, {isLoading: true});
        case FETCH_USER_DONE:
            return Object.assign({}, state, {users: state.users.concat(action.payload)});
}

    return state;
}

用户操作:

export function fetchUser(id: any) {
    return function (dispatch: any) {
        dispatch({ type: FETCH_USER_LOADING });
        return axios.get(`${ROOT_URL}/users/${id}`, {
            headers: { token: localStorage.getItem('token') }
        })
            .then(function (response) …

我在测试一个动作创建器时遇到了麻烦,该动作创建器只是遍历传递给它的数组,并为该数组中的每个项目调度一个动作.这很简单,我似乎无法弄明白.这是动作创建者:

export const fetchAllItems = (topicIds)=>{
  return (dispatch)=>{
    topicIds.forEach((topicId)=>{
      dispatch(fetchItems(topicId));
    });
  };
};

以下是我试图测试的方法:

describe('fetchAllItems', ()=>{
  it('should dispatch fetchItems actions for each topic id passed to it', ()=>{
    const store = mockStore({});
    return store.dispatch(fetchAllItems(['1']))
      .then(()=>{
        const actions = store.getActions();
        console.log(actions);
        //expect... I can figure this out once `actions` returns...
      });
  });
});

我收到这个错误:TypeError: Cannot read property 'then' of undefined.

我是一个新的单元测试Redux-thunk使用Jest的Action .

以下是代码:

export const functionA = (a,b) => (dispatch) =>{
    dispatch ({type: CONSTANT_A, payload: a});
    dispatch ({type: CONSTANT_B, payload: b});
} 

如何测试功能使用Unit-Test Jest？任何人都可以帮助我^^.预先感谢 :)

我是ReactJS的新手，正在尝试将redux与现有项目集成。

这是我index.js存储的文件

import 'rxjs'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { createEpicMiddleware, combineEpics } from 'redux-observable'

import user, { userEpic } from './user/duck'
import app from './app'

// Bundling Epics
const rootEpic = combineEpics(
    userEpic
)

// Creating Bundled Epic
const epicMiddleware = createEpicMiddleware(rootEpic)

// Define Middleware
const middleware = [
  thunk,
  promise(),
  epicMiddleware
]

// Define Reducers
const …

一些动作具有异步功能，例如提取。但是，我不想使用像redux-thunk或redux-saga这样的中间件。因此，我不愿意使用此代码。

/* actions */

...

export const fetchRequest = ({category, query, dispatch}) => ({
    type: actionTypes.FETCH_REQUEST,
    promise:
        fetch(`${API_URL}${category}?${query}`, {headers: headers})
        .then(response => response.json())
        .then(data => dispatch(fetchRecieve(data))),
})

export const fetchRecieve = data => ({
    type: actionTypes.FETCH_RECIEVE,
    data,
})

...

/* In x.jsx */
...

const mapDispatchToProps = dispatch => ({
onClick: (category, query) => dispatch(fetchRequest({category, query, dispatch}))
})

...

Redux范式是否违反了此代码？

在此处输入图片说明

代码：这是我的index.js文件

index.js

    import { Provider } from "react-redux";
    import { createStore } from 'redux';

    import App from './app';

    import reducer from './store/reducer';

    const store = createStore(reducer);
    console.log("Store ..."+store);
    console.log(Provider);

    ReactDOM.render((
      <Provider store={store}>
        <App/>
      </Provider>
    ), document.getElementById('root'));

代码：这是我的reducer.js文件

    reducer.js
    import * as actionTypes from './actions';

    const initialState = {
    assistants:[],
    fetchInProgress:true
    }

    const reducer = (state = initialState, action) =>{

    return state;
    };

    export default reducer;

代码：这是我的app.js文件app.js

class App extends Component{
render(){
return(
  <HashRouter>
    <Switch>
    <Route exact path="/login" name="Login Page" …

问题与过去不同，这就是为什么。这个问题是何时。由于两者本身都是好的框架，问题是我什么时候应该使用传奇而不是传奇。因为我的一位朋友一直坚持要求我在我们的应用中使用传奇，但没有明显的原因。提前谢谢