redux

Using redux with react hooks

由 ε祈祈猫儿з 提交于 2020-01-14 04:59:06
问题 I'm trying to figure out the best way to use redux with react hooks. I saw the following How to use React hooks + Redux However I'm not convinced this is the best way to go. Does anyone have any alternative ideas? I also saw the following and seems quite good. https://www.npmjs.com/package/redux-react-hook Thanks 回答1: The official react-redux package provide hooks since v7.1. Redux hooks can be used instead of the connect(mapStateToProps, mapDispatchToProps) function. useSelector() Extract

状态管理之 redux、dva、vuex

由 冷暖自知 提交于 2020-01-14 04:53:11
前言 日常积累，欢迎指正 1、状态管理之 redux、dva、vuex 1.1、redux Redux is a predictable state container for JavaScript apps - Redux是一个可预测的 JavaScript 应用程序状态容器 redux 中 dispatch(action/actionCreator) 触发 state 修改 state 修改引发页面重新渲染 异步处理：借助 redux-saga 等工具实现 container 组件示例 import App from '../pages/App' import { connect } from 'react-redux' import { Dispatch } from 'redux' import { IStoreState } from '../types/todoList' import { willToDone , doneToWill , del , add } from '../actions/todoList' interface IProps { } const mapStateToProps = ( state : IStoreState , ownProps : IProps ) => { return { todoList : state .

React Redux - changes aren't reflected in component

由 跟風遠走 提交于 2020-01-13 19:33:23
问题 I created a simple React component for generating menu, and I wanted to replace it's visibility toggling with Redux (instead of state). My component looks like this: class SiteMenu extends React.Component { constructor(props) { super(props); } toggle(force = false) { let active = !active; store.dispatch({ type: 'TOGGLE', active }); } render() { const wrapperClass = this.props.active ? `${this.props.className}__wrapper ${this.props.className}__wrapper--active` : `${this.props.className}_

Spread Operator not working for Redux/ES6 based sample

由 纵然是瞬间 提交于 2020-01-13 09:44:08
问题 I am trying to understand Redux online tutorials that are posted by Dan Abramov. At present I am on the following sample: Reducer composition with Arrays Here is my practice code following the above sample: // Individual TODO Reducer const todoReducer = (state, action) => { switch(action.type) { case 'ADD_TODO': return { id: action.id, text: action.text, completed: false }; case 'TOGGLE_TODO': if (state.id != action.id) return state; // This not working /* return { ...state, completed: !state

Update redux state with an input

由 牧云@^-^@ 提交于 2020-01-13 08:21:05
问题 How can I update redux's state from a text input? I'm trying to do a very simple "Hello World" with a text input. When someone types into the text input, it should update my store's "searchTerm" value. I can't figure out these things: 1. How can I get and pass the input's value into it's "onChange" handler? 2. The "search" action seems to be called correctly, but my reducer function is never used (no console.log). SearchForm.js (component) import React, {Component, PropTypes} from 'react';

react-redux: What is the difference between state.setIn() and state.set()?

由 守給你的承諾、 提交于 2020-01-13 07:44:26
问题 I've seen the use of setInt() and set() in some react-redux code: state.setIn(...); state.set(...); I've found some documentation here https://facebook.github.io/immutable-js/ But unfortunately the method is not documented in detail. I also found some other questions: Using React's immutable helper with Immutable.js But these do not answer my question. I understand, that it must do some immutable stuff? But what's the immutable thing here? And what's the difference between set() and setIn()?

React Datepicker with redux-form

由 我们两清 提交于 2020-01-13 07:15:34
问题 How to make the react-datepicker bind with redux-form? I have this redux-form field: <Field name="due_date" component={props => <DatePicker {...props} readOnly={true} selected={this.state.due_date} value={this.state.due_date} onChange={this.handleDueDate} /> } /> Whenever i submit the redux form does return an empty object not binding the datepicker's value... my onChange : handleDueDate(date) { this.setState({ due_date: moment(date).format('L') }, () => { // do I need to dispatch and action

Redux 和 mobx的区别

由 吃可爱长大的小学妹 提交于 2020-01-12 17:27:17
Redux： Redux将数据保存在单一store中，Mobx将数据保存在分散的多个store中 Redux需要手动处理变化后的操作，Mobx使用observable保存数据，数据变化后自动处理响应的操作 Redux使用不可变状态，不能直接去修改它，而是应该使用纯函数返回一个新的状态；Mobx中的状态是可以直接修改的 Redux使用 connect 注入state，Mobx使用 inject注入state Redux是单向数据流： Mobx是单向数据流： Event------>Action —> State —> Views 来源： https://www.cnblogs.com/zhaodagang8/p/10797611.html

redux和mobx比较（二）

由 ぃ、小莉子 提交于 2020-01-12 17:26:43
Redux Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 三大核心 在 Redux 中，最为核心的概念就是 action 、reducer、store 以及 state，那么具体是什么呢？ Action：是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源 Reducer：指明如何更新 state Store：把 action、Reducer 联系到一起的对象，负责维持、获取和更新state 数据流 严格的单向数据流是 Redux 架构的设计核心。 Redux 应用中数据的生命周期遵循下面 4 个步骤： 调用 store.dispatch(action) 触发 action Redux store 调用传入的 reducer 函数 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树 Redux store 保存了根 reducer 返回的完整 state 树 搭配 React 核心库： 1234567 reactreact-domreact-routerreact-router-redux //利用react-router-redux提供的syncHistoryWithStore我们可以结合store同步导航事件reduxreact-reduxreact-thunk/react-saga

React/redux, displaying multiple components, sharing same actions, but with different state

由 夙愿已清 提交于 2020-01-12 14:12:49
问题 Let's say I have a reusable container. It is a wizard with multiple pages. The wizard state is driven by redux/actions. When an action is fired, I use a reducer to update my state. What if I want to have multiple wizards duplicated, with it's own state? I am thinking there must be a way to have actions handled by a certain dynamic reducer (that can be created/destroyed), and then have each individual wizard driven from these dynamic pieces of the store/state. Is this recommended? Are the
订阅 redux