redux

Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

由 蹲街弑〆低调 提交于 2020-02-01 10:08:52
问题 I'm trying to add a snackBar in order to display a message whenever a user signIn or not. SnackBar.jsx: import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; import CheckCircleIcon from "@material-ui/icons/CheckCircle"; import ErrorIcon from "@material-ui/icons/Error"; import CloseIcon from "@material-ui/icons/Close"; import green from "@material-ui/core/colors/green"; import IconButton from "@material-ui/core/IconButton"; import Snackbar from "

Multi select from react-select with redux-form not working as intended

由 元气小坏坏 提交于 2020-02-01 05:46:25
问题 So iam using multi select from react-select with redux-form with the onBlur hack(?) which is working fine behind the curtain because when i submit it I have the selected data in values BUT after visiting any multi select field (even if i dont select anything) I end up with no values at all (nothing is displayed but this )) const options = [ { value: 'one', label: 'One' }, { value: 'two', label: 'Two' } ]; <Select value="one" options={options} multi={true} {...input} onBlur={() => { input

Best practice for React Router user roles (Firebase)

由 徘徊边缘 提交于 2020-02-01 05:02:12
问题 My application will have 2 roles, Employee and Admin. I'm trying to implement middleware so users get redirected if they are not authorized to see the content. Is handling not just general authentication but also user roles in React Router good practice? My first thought was to add a custom role attribute to firebase.auth().currentUser, but adding attributes to currentUser is not allowed by firebase. If so, how would I do it? Through state or fetching it from my Firebase DB like this?: var

React - Passing ref from dumb component(child) to smart component(parent)

由 ＊爱你＆永不变心＊ 提交于 2020-02-01 01:51:21
问题 I have one smart and one dumb component, I need to have ref to an element which is in my the dump component in my smart component: can I pass it with props or?? Dumb: export default (props)=>{ return( <input type='number' ref='element'}/> );} Smart: class Parent extends Component { constructor(props) { super(props); } componentDidMount() { const node = this.refs.element; // undefined } render(){ return <Dumb { ...this.props }/> } } 回答1: You could use the callback syntax for refs: // Dumb:

React - Passing ref from dumb component(child) to smart component(parent)

由 ＊爱你＆永不变心＊ 提交于 2020-02-01 01:51:06
问题 I have one smart and one dumb component, I need to have ref to an element which is in my the dump component in my smart component: can I pass it with props or?? Dumb: export default (props)=>{ return( <input type='number' ref='element'}/> );} Smart: class Parent extends Component { constructor(props) { super(props); } componentDidMount() { const node = this.refs.element; // undefined } render(){ return <Dumb { ...this.props }/> } } 回答1: You could use the callback syntax for refs: // Dumb:

Logout if token is expired

由 99封情书 提交于 2020-01-30 08:19:30
问题 I'm working on a react application that consists of many API requests. The structure of the application is When logging in, I'm receiving a token on response and I'm saving the token in my local storage to be used in other API requests. This token is expired every 30 minutes and if I do an API request after 30 minutes, I'm receiving a status of 401 in my request. I'm using this 401 status to do my logging out and clearing token data in local storage. Example request export function

How to use localStorage in unit tests with Chai

由 我是研究僧i 提交于 2020-01-30 07:57:15
问题 I have an app with react and redux. My test engine is - Chai In my reducer ( src/my_reducer.js ), I try to get token from localStorage like this: const initialState = { profile: {}, token: window.localStorage.getItem('id_token') ? window.localStorage.getItem('id_token') : null, } In my tests file ( test/reducer_spec.js ) I have import 'my_reducer' before test cases: import myReducer from '../src/my_reducer' And I have an error, if I try to run test - localStorage (or window.localStorage) -

How to use localStorage in unit tests with Chai

由 情到浓时终转凉″ 提交于 2020-01-30 07:57:05
问题 I have an app with react and redux. My test engine is - Chai In my reducer ( src/my_reducer.js ), I try to get token from localStorage like this: const initialState = { profile: {}, token: window.localStorage.getItem('id_token') ? window.localStorage.getItem('id_token') : null, } In my tests file ( test/reducer_spec.js ) I have import 'my_reducer' before test cases: import myReducer from '../src/my_reducer' And I have an error, if I try to run test - localStorage (or window.localStorage) -

Redux form with self creating inputs

由 帅比萌擦擦* 提交于 2020-01-29 04:51:28
问题 I'm trying to create a redux form (using redux-form) that can dynamically create it's own inputs. I am having trouble figuring out how to make redux-form aware of the new fields that have been created. Is it possible to dynamically change the fields prop that redux-form passes in within the form component itself? Am I thinking about this wrong? Here is what I am working with. class AddCustomer extends Component { render() { class Form extends Component { constructor(props, context) { super

React07---redux

由 烂漫一生 提交于 2020-01-29 00:58:32
Redux:不是react,更多的用在react里面，管理react应用中多个组件共享 Redux工作流程: 什么情况需要redux: 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用 某个组件的状态，需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 未拆分成redux的app.jsx import React,{Component} from 'react' export default class App extends Component{ state = { number:0 } Add = () =>{ // console.log(this.select.value); let count = this.select.value*1; let number = this.state.number; this.setState({number:number+count}); } Der = () =>{ // console.log(this.select.value); let count = this.select.value*1; let number = this.state.number; this.setState({number:number-count}); } Odd = () =>{ //
订阅 redux