标签: react-redux

使用下面的react/redux设置：

索引.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/app';
import configureStore from './store';

let initialState = {
  foods: {
    apple: {
      selected: false,
      flavors: {
        sweet: true,
        salty: false
      }
    },
    potatoChips: {
      selected: false,
      flavors: {
        sweet: false,
        salty: true
      }
    }
  },
  drinks: {
    < some other object >
  }
}

let store = configureStore(initialState);

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

商店.js

import { …

在我的商店中，我有一个具有以下形状的状态：{posts: [{...},{...}]}，但是当我mapStateToProps()在 Home.js 中使用时，状态返回{posts: []}，带有一个空数组（商店状态中曾经有一个数组）。

我是否使用mapStateToProps()不正确或者问题是否源于 Redux 周期的其他部分？

我正在使用的 API fetch，暂时位于 actions.js 中

// api

const API = "http://localhost:3001"

let token = localStorage.token
if (!token) {
    token = localStorage.token = Math.random().toString(36).substr(-8)
}

const headers = {
    'Accept': 'application/json',
    'Authorization': token
}

// gets all posts
const getAllPosts = token => (
    fetch(`${API}/posts`, { method: 'GET', headers })
);

动作和动作创建者，使用 thunk 中间件：

// actions.js

export const REQUEST_POSTS = 'REQUEST_POSTS';
function requestPosts (posts) { …

过去我就是Object.assign()这样使用和完成的，但最近我被告知要使用扩展运算符。我想知道这是否是正确的做法，或者这是否会改变状态？

import constants from '../constants';

const initialState = {
  all: null
};

export default (state = initialState, action) => {
  switch (action.type) {
    case 'ITEM_ADDED':
      return { ...state, all: state.all.push(action.data) };
    default:
      return { ...state };
  }
};

我正在尝试在此登录页面中添加 SVG 作为背景图像（代码和预览如下）。但我不知道该怎么做，我只知道<img src="background.svg" class="yourCSSClass"> 但这会在我的文本上方添加 SVG，而我希望它在我的文本后面。我怎么做？我在这里发送我的反应代码和 SVG 文件

这是 App.js`

import React, { Component } from 'react';
    import './App.css';
    import NameForm from './Form';

    class App extends Component {
      render() {
        return (
          <div className="App">
            <div className="Heading">
    <h1>Welcome to the Sudistic</h1>
    <h3>A small to contribution to the programming community.</h3>
            </div>
            <div>
              <h4>Log In to your Account</h4>
            </div>
            <div>
              <NameForm />
            </div>

          </div>

        );
      }
    }

    export default App;

这是App.css

    .App {
  text-align: center;
  margin-top: 170px;
}

 h1 {
  color: …

我正在开发一个react-with-redux应用程序，我正在使用redux-undo库，随着库的功能的发展，它会监听一系列操作，并在撤消发生时恢复到之前的状态。

场景：我有一个页面，其中将创建/删除列表项，并且每当这些操作发生时都会进行 API 调用。用户可以撤消创建和删除操作。

我想知道是否有任何方法可以知道已调度的最新操作。

例如：如果用户创建一个列表项并单击撤消，我想知道调度的最新操作是创建，以便我可以恢复创建（通过进行 API 调用删除列表项）。

同样，如果用户删除了一个列表项，我想知道最近调度的操作是删除，以便我可以恢复删除（通过进行 API 调用再次创建列表项，从过去的形状中获取详细信息状态并发送已删除列表项的详细信息）

请让我知道是否有任何方法可以实现这一目标？

我对 React Native 中的动画 API 相当陌生。我浏览了很多使用动画 API 的教程，似乎每个教程中的元素都是绝对定位的，是否有必要将元素绝对定位？

我还制作了一段动画，但它看起来有问题，我认为文本输入后的视图没有绝对位置，这可能会导致问题。是否可以在保持文本输入位置绝对但其他元素使用 Flexbox 定位的同时执行我尝试的动画？

这是代码

handleFocus = () => {
console.log('starting animation');
this.setState({
  isFocused: true
});
Animated.timing(this.isFromViewFocused, {
  toValue: 1,
  duration: 300
}).start();
}

handleBlur = () => {
console.log('Blurring');
this.setState({
  isFocused: false
});
Animated.timing(this.isFromViewFocused, {
  toValue: 0,
  duration: 300
}).start();
}

render() {
const labelStyle = {
  position: this.state.isFocused === true ? 'absolute' : 'relative',
  alignItems: 'center',
  width: this.isFromViewFocused.interpolate({
    inputRange: [0, 1],
    outputRange: [DEVICE_WIDTH * 0.45, DEVICE_WIDTH]
  }),
  left: this.isFromViewFocused.interpolate({
    inputRange: [0, …

我正在编写一个 React/Redux 应用程序，它使用 Firebase Auth/Firestore 来跟踪用户的健身锻炼。我有 Redux Form 来处理数据提交，并且我有以下想要在 Firestore 中实现的示例数据结构：

users {
  id {
    name: 'John Smith'
    uid: 'k1s7fxo9oe2ls9u' (comes from Firebase Auth)
    exercises: {
      {
        name: 'Bench Press',
        sets: 3,
        reps: 10,
        lbs: 100,
      }
    }
  }
}

但是，我不知道如何不断将新的练习对象添加到练习子集合中（在 Firestore 中，我猜这将是地图的字段类型）。我想做的是当用户提交新表单时在“练习”中添加新对象。例如，如果用户想要添加硬拉练习，则如下所示：

   users {
      id {
        name: 'John Smith'
        uid: 'k1s7fxo9oe2ls9u' (comes from Firebase Auth)
        exercises: {
          {
            name: 'Bench Press',
            sets: 3,
            reps: 10,
            lbs: 100,
          },
          {
            name: 'Deadlift',
            sets: 3,
            reps: 12,
            lbs: 120,
          }
        } …

我想在操作被触发后重定向客户端。我听说过react-redux-router，但不确定如何在操作函数中正确实现它。

我关注了一点这个

/sf/answers/3009011281/

但是，当我提交经过验证的表单时，它不会重定向或刷新。

Actions.js

 import { auth as firebaseAuth } from '../firebaseConfig'
 import { push,  browserHistory } from 'react-router-redux';


 export const signUp = (user) => { return (dispatch) => {
  firebaseAuth.createUserWithEmailAndPassword(user.email, user.password)
    .then(() => {
        dispatch({ type: 'SIGNUP_SUCCESS',
        payload: (action, state, res) => {
            return res.json().then(json => {
              browserHistory.push('/');
              return json;
            });
          },
    });
    }).catch((err) => {
        dispatch({ type: 'SIGNUP_ERROR', err});
    });
  }  
}

减速器.js

const initialState = {
  emailSignUp: '',
  passwordSignUp: '',
  authError: null

}

export …

我想知道我是否有一些类似的行动

.then((res) => {
                dispatch({
                    type: FETCH_DATA_SUCCESS,
                    payload: res
                })
            })

在我的减速器中，我想用动作有效负载改变状态。所以在本例中它是来自 api 的响应。以及状态中的一些值，例如。isLoading: false 与 isLoading:true

在我的减速器中如下：

let initialState = [{
    isLoading: false,
}]

export default (state = initialState, action) => {
    switch (action.type) {
        case FETCH_DATA_START:
            return [...state]
        case FETCH_DATA_SUCCESS:
            return [...state, ...action.payload]  
        case FETCH_DATA_FAILED: 
            return [state]
        default:
            return state
    }
}

以下是在FETCH_DATA_SUCCESS 操作负载和 isLoading: true 情况下如何分配。

所以最后我想让我的状态像这样：

State = [{
    isLoading: true,
    items: [{}] // items is coming from response of fetch call

}]

我怎样才能做到这一点？

这里的目标是减少组件中的代码量，如下所示：

import {
  increaseProductQuantity as increaseProductQuantityAction,
  decreaseProductQuantity as decreaseProductQuantityAction,
} from '~/store/modules/createCampaign/actions'

export default function MyComponent() {
  const dispatch = useDispatch()

  function increaseSurveyQuantity() {
    dispatch(increaseProductQuantityAction('survey'))
  }

  function decreaseSurveyQuantity() {
    dispatch(decreaseProductQuantityAction('survey'))
  }

  function increaseRewardQuantity() {
    dispatch(increaseProductQuantityAction('reward'))
  }

  function decreaseRewardQuantity() {
    dispatch(decreaseProductQuantityAction('reward'))
  }
}

我尝试为调度操作的函数创建一个单独的文件，如下所示：

import { useDispatch } from 'react-redux'

import {
  increaseProductQuantity as increaseProductQuantityAction,
  decreaseProductQuantity as decreaseProductQuantityAction,
} from '~/store/modules/createCampaign/actions'

const dispatch = useDispatch()

export function increaseSurveyQuantity() {
  dispatch(increaseProductQuantityAction('survey'))
}

export function decreaseSurveyQuantity() {
  dispatch(decreaseProductQuantityAction('survey'))
}

export function increaseRewardQuantity() { …