标签: redux

我正在尝试使用redux-saga在react-native中注册firebase回调,但我无法弄清楚如何(我是redux-saga的新手).下面是我想在redux saga中编写的代码:

firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log('user logged')
      }
   });

我使用react native和redux作为以下(工作):

App.js

export default class App extends React.PureComponent {
  constructor (props) {
    super(props);

    this.state = { ...store.getState()};
    store.subscribe(() => {
      // i can read the state but no write it
      const storestate = store.getState();       
    });
  }

  handleConnectivityChange = isConnected => {
    this.setState({ isConnected });
  };

  render() {
    return (
      <Provider store={store}>
        <PersistGate
          loading={<ActivityIndicator />}
          persistor={persistor}>

          <View style={{ flex: 1, marginTop: Config.marginTop }}>
            <StackView />

          </View>
        </PersistGate>
      </Provider>
    );
  }
}

ScreenX.js

import * as actions from "./redux/actions";
import { …

我正在尝试按照Cleaner /更短的方式中的说明更新Redux中的嵌套状态？[接受的答案]

事情就是在我的特殊情况下,我有一个层真的取决于用户在那一点上选择的模型.我的结构:

现在在我的reducer中,我已经尝试过(只想将最喜欢的叶子改为true):

let newStateForFavorites = {...state, models: {
            ...state.models,
            62416: {
                ...state.models.62416,
                details: {
                    ...state.models.62416.details,
                    favorited: true
                }
            }
        }};

Javascript抱怨.如果我尝试将其提取到var:

const currentModelToFav = action.payload.model_id;
let newStateForFavorites = {...state, models: {
            ...state.models,
            currentModelToFav: {
                ...state.models.currentModelToFav,
                details: {
                    ...state.models.currentModelToFav.details,
                    favorited: true
                }
            }
        }};

Javascript不关联const.而且错误out -currentModelToFav未定义 -

关于我做错了什么的想法？谢谢!

这是我的代码

import React        from "react";
import ReactDOM     from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import "normalize.css/normalize.css"
import  "./styles/styles.scss";
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import reduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

import AppRouter from './routers/AppRouter';
import reducers from './reducers';
import {AUTH_USER} from "./actions/types";

//
const createStoreWithMiddleware =  applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);


const token = localStorage.getItem('token');
if(token){
    store.dispatch({type:AUTH_USER});
}

ReactDOM.render(
    <Provider store={store}>
        <AppRouter />
    </Provider>
    , …

所以我想创建一个通用动作创建器来管理redux商店中的项目.

假设我的redux商店看起来像这样:

one: '',
two: '',
three: ''

我的动作创建者看起来像这样:

export const setStatus = (name, status) =>{
    return function(dispatch){
        dispatch({
            type: 'SET_STATUS',
            name,
            status
        })
    }
}

我不知道如何创建一个可以管理所有这些的动作.试着

case 'SET_STATUS':{
            return{
                ...state,
                action.name: action.status 
            }
        }

但是redux不会让我.有没有解决方法？

我不确定是否有人尝试过使用框架7反应模板的redux,但我认为这是一个更普遍的错误.我成功安装并运行了framework 7 react模板,然后我想尝试redux.我安装了redux,react-redux并尝试将redux网站中的todoList示例集成到同一个模板中.我得到一些文件意外的字符错误,我不知道为什么会发生这种情况.

我试图在导入或删除时删除括号; 导入行结束但没有改变任何东西.我直接从redux网站复制并粘贴代码,也许是一些隐藏的字符问题,我该如何测试并摆脱它？

./src/components/Footer.js语法错误:D:\ client\src\components\Footer.js:意外的字符''(4:0)

import React from 'react'
import FilterLink from '../containers/FilterLink'
import { VisibilityFilters } from '../actions'
?
const Footer = () => (

./src/reducers/index.js语法错误:D:\ client\src\reducers\index.js:意外字符''(5:0)

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'

?export default combineReducers({

注意我打电话setStepPositionIndex()用dispatch().当我删除dispatch(...)成为正义setStepPositionIndex() 我会期望内部的调度调用setStepPositionIndex()将接收它传递的普通操作对象并发送它...

或者,如果我在显式返回其中的内部删除dispatch()调用setStepPositionIndex()(并保持dispatch(setStepPositionIndex())actionObj,我希望成功调度dispatch(setStepPositionIndex(actionObj))

但是这个动作创作者的成功执行需要两个......为什么？

   /* actions.js */
import { store } from "../store.js";

store.dispatch(setStepPositionIndex());

export const SET_STEP_POSITION_INDEX = "SET_STEP_POSITION_INDEX";
export const setStepPositionIndex = () => {
  return (dispatch, getState) => {
    const newSteps = getState().goals.currentGoalSteps.map((stepObj, index) => {
      return { ...stepObj, positionIndex: index };
    });
    console.log("newSteps", newSteps);
    /* [{step: "Step3", positionIndex: 0}
      {step: "Step2", positionIndex: 1}
      {step: "Step1", positionIndex: 2}] */ …

我的商店看起来像这样

{
  itemA: {val1, val2, val3},
  itemB: {val1, val2, val3},
  ....
}

在我的选择器文件中，我有这样的东西

const getItemAobject(state) => return state.itemA;
const getItemBobject(state) => return state.itemB;

....

const selectItemA = createSelector([getItemAobject], (itemAobject) => itemAobject);
const selectItemB = createSelector([getItemBobject], (itemBobject) => itemBobject);

终于在mapStateToProps我有

mapStateToProps(){
 {
  itemA: selectItemA(state)
  itemB: selectItemB(state)
 }
}

在这种情况下，我的选择器没有做任何花哨的事情，我应该使用重新选择吗？我可以轻松地做到这一点

mapStateToProps(){
 {
   itemA: state.itemA
   itemB: state.itemB
 }
}

如果有选择器，使用选择器有什么好处？

Redux说处理状态的行动(Reducers)必须是纯粹的.

但是,查看React-Redux文档,它们展示了如何将新的Todo任务添加到Todos列表中,并且该函数为新的Todo任务生成新的标识符.这显然不纯洁.再次调用相同的函数不会产生相同的输出.

有一个例子(从这个页面):

// redux/actions.js
import { ADD_TODO } from "./actionTypes";

let nextTodoId = 0;
export const addTodo = content => ({
  type: ADD_TODO,
  payload: {
    id: ++nextTodoId,
    content
  }
});

// ... other actions

这是否意味着我必须忘记到目前为止所学到的一切？

我正在使用redux向导表单进行编辑,其中我在向导中的每个页面的componentDidMount中加载数据.但是,当我更新值并转到下一页时,更新的值不会在第二种形式中重新连接,而如果我来到上一页,它会加载初始值而不是更新的值.任何人都可以告诉我我的代码有什么问题:

第一表格:

componentDidMount() {
const users = this.props.users;
let user = {};
user = users[this.props.userID];
this.setState({file: user.profilePicture});
this.props.initialize(user);
console.log('user is', user);
}

render() {


const { handleSubmit } = this.props;
  const age = (value) => (value == null ? '' : this.state.age);
  return (
    <form onSubmit={handleSubmit}>
      <Col sm="12">
        <Card className="card-border">
          <CardBody>
            <FormGroup row>
              <Col xs="12" lg="2">
                <img
                  src={this.state.file}
                  style={{width: 125, height: 125}}
                  className="img-avatar"
                />
              </Col>
              <Col xs="12" lg="10">
                <Field
                  type="file"
                  id="file-input"
                  name="image"
                  accept="image/*"
                  component={ImageUpload}
                  label="Upload User Image *"
                  validation="fieldRequired"
                  className="fileLoader" …