标签: reducers

是否可以在减速机本身发送动作？我有一个进度条和一个音频元素.目标是在音频元素中更新时间时更新进度条.但是我不知道将ontimeupdate事件处理程序放在何处,或者如何在ontimeupdate的回调中调度一个动作来更新进度条.这是我的代码:

//reducer

const initialState = {
    audioElement: new AudioElement('test.mp3'),
    progress: 0.0
}

initialState.audioElement.audio.ontimeupdate = () => {
    console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration);
    //how to dispatch 'SET_PROGRESS_VALUE' now?
};


const audio = (state=initialState, action) => {
    switch(action.type){
        case 'SET_PROGRESS_VALUE':
            return Object.assign({}, state, {progress: action.progress});
        default: return state;
    }

}

export default audio;

我目前正在学习React,我正在尝试弄清楚如何将它与Redux一起用于构建移动应用程序.我对两者如何相关/可用在一起感到困惑.例如,我在React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript中完成了本教程,但现在我想要为该应用程序添加一些reducers/actions以及我不确定那些与我已经做过的事情有什么关系.

我不明白减压器是什么意思.如果我有2个包含相同动作的reducer功能,它是否可以使用？

function reducerA(state, action){
   switch(action.type):
       ...
       case 'SAME_ACTION': {...state, field: state.field+1}
}

function reducerB(state, action){
   switch(action.type):
       ...
       case 'SAME_ACTION': {...state, field: state.field*2}
}

所以,如果我调用并且调用reduceReducer了动作"SAME_ACTION",那么我会有下一个状态吗？reducerAreducerB{field: 0}{field: 2}

在我看来,它有点连接缩减器(意味着将它们合并在一个键下).

我是对的还是reduceReducer服务于不同的目的？

我不是 Javascript 专家，所以我想知道是否有人有一种“优雅”的方式来组合多个减速器来创建全局状态（如 Redux）。当一个状态更新多个组件等时不影响性能的功能。

假设我有一个 store.js

import React, { createContext, useReducer } from "react";
import Rootreducer from "./Rootreducer"

export const StoreContext = createContext();

const initialState = {
    ....
};

export const StoreProvider = props => {
  const [state, dispatch] = useReducer(Rootreducer, initialState);

  return (
    <StoreContext.Provider value={[state, dispatch]}>
      {props.children}
    <StoreContext.Provider>
  );
};

Rootreducer.js

import Reducer1 from "./Reducer1"
import Reducer2 from "./Reducer2"
import Reducer3 from "./Reducer3"
import Reducer4 from "./Reducer4"

const rootReducer = combineReducers({
Reducer1,
Reducer2,
Reducer3,
Reducer4
})

export default rootReducer;

关于此错误,无法在此处找到任何内容:

"Store没有有效的reducer.确保传递给combineReducers的参数是一个值为reducers的对象."

我的减速机

export default function FriendListReducer(state = {friends : []}, action) {
  switch (action.type) {
    case 'ADD_FRIEND':
      return [
        { friends : action.payload.friend }, ...state.friends
      ]     
    default:
      return state;
  }
  return state;
}

合

import { combineReducers } from 'redux';
import { FriendListReducer } from './FriendListReducer';

const rootReducer = combineReducers({
  friends: FriendListReducer
});
export default rootReducer;

我的商店配置

import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from '../reducers/reducers';

export default function …

在这个Redux:Colocating Selectors with Reducers Egghead教程中,Dan Abramov建议使用接受完整状态树而不是状态切片的选择器来封装状态知识,远离组件.他认为这使得更容易改变状态结构,因为组件不知道它,我完全赞同.

然而,他建议的方法是,对于对应于特定状态切片的每个选择器,我们再次将其与根减速器一起定义,以便它可以接受完整状态.当然,这种实现开销会破坏他想要实现的目标......简化将来改变状态结构的过程.

在一个包含许多reducers的大型应用程序中,每个都有很多选择器,如果我们在root reducer文件中定义所有选择器,我们不会不可避免地遇到命名冲突吗？直接从相关的reducer导入选择器并传入全局状态而不是相应的状态片段有什么问题？例如

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, todo(undefined, action)];
    case 'TOGGLE_TODO':
      return state.map(t => todo(t, action));
    default:
      return state;
  }
};

export default todos;

export const getVisibleTodos = (globalState, filter) => {
  switch (filter) {
    case 'all':
      return globalState.todos;
    case 'completed':
      return globalState.todos.filter(t => t.completed);
    case 'active':
      return globalState.todos.filter(t => !t.completed);
    default:
      throw new Error(`Unknown filter: ${filter}.`); …

组合器在Mapper之后运行,在Reducer之前,它将接收Mapper实例在给定节点上发出的所有数据作为输入.然后将输出发送到Reducers.

而且,如果reduce函数既是可交换的又是关联的,那么它可以用作组合器.

我的问题是" 交换和联想 "这个词在这种情况下意味着什么？

我不知道如何isLoading从reducerForm.jsreducer中访问一个布尔标志reducerRegister.js.我已经使用过combineReducers(),我isLoading在表单提交过程中用来禁用按钮.

它的初始状态为false,点击提交后,它会变为true.表单提交成功后,再次isLoading重置false.以下是此问题的相关代码:

actionRegister.js

let _registerUserFailure = (payload) => {
    return {
        type: types.SAVE_USER_FAILURE,
        payload
    };
};
let _registerUserSuccess = (payload) => {
    return {
        type: types.SAVE_USER_SUCCESS,
        payload,
        is_Active: 0,
        isLoading:true
    };
};

let _hideNotification = (payload) => {
    return {
        type: types.HIDE_NOTIFICATION,
        payload: ''
    };
};

// asynchronous helpers
export function registerUser({ // use redux-thunk for asynchronous dispatch
    timezone,
    password,
    passwordConfirmation,
    email,
    name
}) …

我有一个待办事项列表,并希望如果用户点击"完成",则将数组中该项目的状态设置为"完成".

这是我的行动:

export function completeTodo(id) {
    return {
        type: "COMPLETE_TASK",
        completed: true,
        id
    }
}

这是我的减速机:

case "COMPLETE_TASK": {
             return {...state,
                todos: [{
                    completed: action.completed
                }]
             }
        }

我遇到的问题是新状态不再具有与所选项目上的待办事项关联的文本,并且ID不再存在.这是因为我覆盖了州并忽略了之前的属性吗？我的对象项onload看起来像这样:

Objecttodos: Array[1]
    0: Object
        completed: false
        id: 0
        text: "Initial todo"
    __proto__: Object
    length: 1
    __proto__: Array[0]
    __proto__: Object

如您所见,我想要做的就是将完成的值设置为true.

概述(简化):

在我的NodeJS服务器中,我实现了以下GraphQL架构:

type Item {
  name: String,
  value: Float
}


type Query {
  items(names: [String]!): [Item]
}

然后客户端查询传递一个名称数组作为参数:

{
  items(names: ["total","active"] ) {
    name
    value
  }
}

后端API查询mysql DB,查看" total "和" active "字段(我的数据库表上的列)并减少响应,如下所示:

[{"name":"total" , value:100} , {"name":"active" , value:50}]

我想我的graphQL API支持"比例"项目,IE:我想发送以下查询:

{
  items(names: ["ratio"] ) {
    name
    value
  }
}

要么

{
  items(names: ["total","active","ratio"] ) {
    name
    value
  }
}

并返回active/total作为该新字段([{"name":"ratio" , value:0.5}])的计算结果.以不同方式处理" 比率 "字段的通用方法是什么？

它应该是我的架构中的新类型还是应该在reducer中实现逻辑？