redux

自定义React-redux

由 。_饼干妹妹 提交于 2020-01-16 16:04:32
实现mini版react-redux 1. 理解react-redux模块 1). react-redux模块整体是一个对象模块 2). 包含2个重要属性: Provider和connect 3). Provider 值: 组件类 作用: 向所有容器子组件提供全局store对象 使用: <Provider store={store}><Xxx/></Provider> 4). connect 值: 高阶函数 作用: 包装组件生成容器组件, 让被包装组件能与redux进行通信 使用: connect(mapStateToProps, mapDispatchToProps)(Xxx) 2. context的理解和使用 1). 理解 当你觉得多层传递props麻烦, 可以选择使用context context是组件对象的一个属性, 它的值是一个对象 一个组件指定的context内数据, 所有层次子组件都可以读取到 如果可以尽量不用context, 你可以选择使用react-redux, react-redux内部就利用了context 2). 使用 父组件: static childContextTypes = { color: PropTypes.string } getChildContext() { return {color: 'red'}; } 后代组件: static

React Router Dom redirect from redux action creator

由 余生长醉 提交于 2020-01-16 14:07:56
问题 I am working in a Web application (built using React+Redux+React Router Dom) and Firebase as backend. My question is: Is possibile to carry out a Redirect from an action creator (so, outside the react router dom components ) ? For example: I want user to be redirected to Home after an operation of deletion of an item: export const deleteItem = (item) =>{ const id = firebase.auth().currentUser.uid; var itemRef = firebase.database().ref("users/"+id+"/items/"+item); return dispatch =>{ dispatch(

in React Accessing a state via this.props returns function instead of state object

由 本秂侑毒 提交于 2020-01-16 14:03:02
问题 Scenario: I have two components, <Homepage> [self explanatory name] and <Country> [which shows a list of country accessed through an API]. <Homepage> imports <Country /> [Country is the child] I dispatch an action to get list of country in . everything works fine, state gets updated as required. Also I'm using mapStateToProps and mapDispatchToProps . Below is the code for <Country /> import React, { Component } from 'react'; import { connect } from 'react-redux'; import { userActions } from '

How to render data from redux store while action and reducer called in the same time

由 若如初见. 提交于 2020-01-16 09:59:14
问题 I have problem related to reducer and action. Expose that I have a Component is Posts to display all posts. I create a Reducer to store all posts. I make an action to call all posts from API A component will display data from store through action called inside component. It means that reducer will be empty before action called. Of course If I set condition to check reducer is empty or not, it is not bad solution. But this is not really good if I need to show how many posts or sort posts

How to get req.query value from Node.js backend to React-Redux front-end?

由 浪尽此生 提交于 2020-01-16 08:50:30
问题 GOAL : to have a functioning query search on the react front end. TRIED : Backend looks like this //route: GET /shop //note: get all the products on shop page //access: public router.get('/', async (req, res) => { try { let items //sort by category if(!req.query.category) { items = await Product.find() } else { items = await Product.find({category: req.query.category}) } //sort by price and letter if(req.query.sortBy) { let sort ={} const sortByArray = req.query.sortBy.split(':') sort

React / Redux / Pure Component with an array property re-renders when the array has not changed

由 柔情痞子 提交于 2020-01-16 08:19:18
问题 I have a React / Redux app that renders a grid of PureComponents. I want the components to only re-render when a prop value has changed, but in fact all components re-render on any update to store. The issue appears to be caused by an array property. I've reproduced the issue in this sandbox. In this minimal example, two instances of the Cell component are rendered. Each displays a value that is separately recorded in the store, and can be incremented or decremented separately with a button.

Redux Dispatch Not Working in Action Creator

由 强颜欢笑 提交于 2020-01-16 06:46:31
问题 I have the following action creator(s) and for some reason, the code within the dispatch doesn't execute, although I know that the loginSuccess() gets invoked because the first alert triggers. What am I doing wrong? import facebook from '../api/facebook' import * as types from '../constants/ActionTypes'; export function loginSuccess() { alert("This alerts fine"); return dispatch => { alert("This doesn't alert"); } } I am using Thunk (or at least think I am correctly) as can be seen below when

Change redux state based on onChange event value

由 落爺英雄遲暮 提交于 2020-01-16 06:15:49
问题 I am using redux and I have a state with empty string values. Each empty key has to be filled in using input onChange event. Say I want to change 'business_selected' key, what should the function look like? Here's my state: const initialState = { user: {}, applications: [ { companyFlow: { stage1: { business_activity: "", business_selected: "" }, stage2: { legal_name: "", registration_number: "", business_website: "", incorporation_date_text: "", legal_form: "" } } } ] }; export default

MobX or Redux?

由 纵然是瞬间 提交于 2020-01-15 22:23:39
前言 在过去的项目中一直用的都是Redux，觉得挺不错的，按照官方推荐的一些写法，再加上团队风格，打造了一套关于Redux的架构，但是，现在觉得写Action、Reducer太繁琐，随着业务不断的增量，相应的文件和代码也会不断的增加，而且对新人来说不是非常友好(理解Redux比较困难)，听说一方诸侯MobX非常不错，所以在尝试使用了，目前项目中两套架构都是并存，写下自己的一些感想。 都解决什么问题？ 1、组件之间复用状态非常困难 React本身没有提供将可复用性状态“附加”到组件的途径（例如，把组件连接到 store）。如果你使用过 React 一段时间，你也许会熟悉一些解决此类问题的方案，比如 props 和 HOC。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。写下这片博客的时候，React已提供Hook，但是本人觉得这都是些hack方案。 2、复杂组件变得难以理解 我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除

NgRx Get value without subscribing

由 泪湿孤枕 提交于 2020-01-15 10:37:28
问题 I am working my way through some ngrx tutorials and I think I'm starting to get my brain wrapped around it. What I don't understand is how to do something as simple as getting a value from the Store : Goal : Get a value from the store without having to subscribe to it. IE: store.myStoreProperty or store.getValue(<selector>) or ? From what I understand the only way to grab a value from the store is to do something like this: private readonly _store: Store<ApplicationState>; // ... this._store
订阅 redux