redux，normalizr，access store mapDispatchToProps
redux是一个用于JavaScript应用程序的可预测状态容器。它是一个用于管理应用程序状态的开源库，可以帮助开发者更好地组织和管理应用程序的状态。redux通过使用单一的全局状态树来管理应用程序的状态，并通过定义纯函数来处理状态的变化。
normalizr是一个用于处理嵌套JSON数据的工具库。它可以将嵌套的JSON数据结构规范化为扁平化的数据结构，使得数据的访问和处理更加方便。normalizr提供了一组用于定义数据模式和规范化数据的函数，可以根据定义的模式将嵌套的JSON数据转换为规范化的数据。
access store是指在redux中访问存储的方法。在redux中，可以通过使用mapStateToProps和mapDispatchToProps两个函数来访问存储。mapStateToProps函数用于将存储中的状态映射到组件的属性上，使得组件可以通过属性访问存储中的状态。mapDispatchToProps函数用于将存储中的操作映射到组件的属性上，使得组件可以通过属性触发存储中的操作。
mapStateToProps函数接收存储中的状态作为参数，并返回一个对象，该对象将被映射到组件的属性上。通过在组件中使用connect函数，并传入mapStateToProps函数作为参数，可以将存储中的状态映射到组件的属性上。
mapDispatchToProps函数接收存储中的dispatch函数作为参数，并返回一个对象，该对象将被映射到组件的属性上。通过在组件中使用connect函数，并传入mapDispatchToProps函数作为参数，可以将存储中的操作映射到组件的属性上。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（Mobile）：https://cloud.tencent.com/product/mobile
相关·内容
在组件中使用mapDispatchToProps来调用操作更有效，还是在操作创建者中使用store.dispatch更有效？
mapDispatchToProps 示例：
// Component
import React from 'React';
import { connect } from 'react-redux';
import { defaultAction } from './actions';
class MyComponent extends Component {
onClickHandler() {
thi
浏览 3提问于2016-12-12得票数 7
回答已采纳
Types.js文件：
const ADD_TOKENS = "ADD_TOKENS";
export { ADD_TOKENS};
Actions.js文件：
import { ADD_TOKENS } from "./types";
function addTokens() {
return {
type: ADD_TOKENS,
};
}
const actionCreators = {
addTokens,
};
export { actionCreators };
Reducers.js文件
import { ADD_TOK
浏览 0提问于2020-05-31得票数 0
2回答
import React from "react"
import {connect} from "react-redux"
import {increment} from "./redux"
function App(props) {
return (
<div>
<h1>{props.count}</h1>
<button onClick={()=>props.handleClick(5)}>+</but
浏览 3提问于2020-05-11得票数 0
1回答
在我的redux应用程序中，我试图一起使用redux和react导航：
<Provider store={store}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Dashboard" component={Dashboard} />
<Stack.Screen name="Store" component={Store} />
浏览 1提问于2020-08-22得票数 0
回答已采纳
我在React / Redux应用程序中使用mapDispatchToProps。
function mapDispatchToProps(dispatch) {
return bindActionCreators( { fetchUsers }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);
我看到store.dispatch()在容器中被使用，我能用它代替mapDispatchToProps吗？我不完全理解store.dispatch()，我应该在哪里使用它
浏览 7提问于2017-06-25得票数 0
回答已采纳
我对一些组件使用了一个基类。然而，在使用redux时，我遇到了连接问题。只有在尝试使用与基类'DockerWindow'.的连接时才会发生这种情况。如果我只在儿童'DockChat'上使用它，它就能工作。如何访问'DockerWindow'上的'store' (一个基类)？
DockerWindow
-> DockChat
-> DockOnline
错误：
react-redux
connect.js?243b:129Uncaught TypeError: Cannot read property 'stor
浏览 2提问于2016-05-18得票数 0
2回答
我试图探索redux、Provider以及mapStateToProps和MapDispatchToProps的基础知识，使用非常简单的反例。练习的目的是将道具和动作注入计数器组件中。
我看到的问题是，我的行动是两次在每个按钮点击。我是一个Redux，所以我确信(我希望)这是一个相当基本的错误。我希望你能给我指点我哪里出错了。提前谢谢。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
impo
浏览 2提问于2017-12-22得票数 5
回答已采纳
应该在项目的依赖项中列出“‘store”
由于某些原因，我无法将我的商店导入App.js
在这里，您可以看到App.js和store.js处于相同的级别：
App.js
import React from 'react';
import { connect, Provider } from 'react-redux';
import Routes from './config/Routes';
import { setSearch } from './actions';
import localCoi
浏览 0提问于2017-12-06得票数 0
回答已采纳
import {createStore,compose,applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducer from '../Reducer/index'
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enha
浏览 389提问于2018-12-24
1回答
我正在尝试使用redux、react-engine和react-router。
我遇到的问题或问题是，react-engine提供了来自服务器的props对象。如何从我的ProvidedApp中访问这些道具
ProvidedApp.js
import React from 'react'
import { connect, Provider } from 'react-redux'
import App from './app'
import { mapStateToProps, mapDispatchToProps, store } from
浏览 1提问于2016-04-06得票数 3
回答已采纳
2回答
我对redux还不熟悉--为什么不调用mapStateToProps并更新组件以显示“hello”？
const helloReducer = (state= {message:'none'}, action) => {
switch (action.type) {
case 'HELLO':
return Object.assign(state,{message:"hello world"});
default:
return state;
}
};
const myApp =
浏览 2提问于2016-02-21得票数 3
回答已采纳
1回答
下午好!我开始与react-redux打交道，一度陷入困境。我不知道如何访问组件本身中的dispatch方法。问题是，我正在尝试从表单字段中获取数据。在mapDispatchToProps方法中，我无法得到refs。请告诉我如何正确地做这件事？
例如: index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import store from './store'
impo
浏览 3提问于2020-01-28得票数 1
回答已采纳
1回答
我刚开始尝试建立一个随机引号生成器，
控制台错误说明在使用
这是我的代码：
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import axios from 'axios';
const quotesList = array of objects each quote has text and author
const CHANGE_QUOTE = "CHANGE_QUOTE
浏览 1提问于2019-12-26得票数 1
回答已采纳
下面是在redux提供程序中包装堆栈导航器的代码
import React, { Component } from 'react';
import WelcomePage from './components/welcomePage';
import Register from './components/register';
import { StackNavigator } from 'react-navigation'
import {
Platform,
StyleSheet,
Text,
View
} f
浏览 0提问于2018-04-08得票数 0
回答已采纳
1回答
我在我的应用程序中有三个选项卡，我经常从每个选项卡中获取值，并在第三个tab.The应用程序中保存数据，如果导航顺序没有改变，它可以正常工作。(即)表1->表2->表3。
但是当我从表3->表2->表3导航时，来自.The的Tab1值将为null。类似地，当我从Tab3->tab1->Tab3导航时，来自.The的Tab2值将获得null。
Reducer.js
const initialState = {
external: [],
internal: [],
usercode:'',
vehicleImage:'',
ch
浏览 2提问于2019-06-06得票数 1
回答已采纳
Action在使用mapDispatchToProps函数返回对象传递connect时没有在function redux中工作。它在通过Action时工作，直接在下面连接一些特定的东西。无法理解不同之处。
不工作：
const mapDispatchToProps = () => {
return {
increment,
decrement
}
}
const WrappedCounter = ReactRedux.connect(mapStateToProps, mapDispatchTo
浏览 6提问于2022-10-16得票数 0
回答已采纳
1回答
如何访问根组件的道具？ import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import cartReducer from './store/cartReducer'
import AddToCart from './cart/addToCart.jsx'
const
浏览 18提问于2019-03-22得票数 0
回答已采纳
我正在学习Redux React。如何使用mapDispatchToProps？我的代码如下所示
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getAddress } from '../store/actions/addressActions';
class Dashboard extends Component {
componentDidMount = () => {
this
浏览 35提问于2019-03-26得票数 2
回答已采纳
我正在尝试使用redux和redux本机导航来编写react本机应用程序。但是，我实际上不想将导航状态保存在redux中。所以我只想让他们彼此分离。我目前有一个StackNavigator，它封装在一个连接中，然后由提供程序包装。
const mapStateToProps = state => state;
const mapDispatchToProps = dispatch => dispatch;
// need this Higher Order Component so you can pass properties through the root stack
co
浏览 0提问于2018-07-04得票数 1
回答已采纳
我试图显示加载，直到RootContainer中的所有组件完成它们的api调用，但是我的应用程序运行在被调用的调度动作的无限循环中，并且应用程序始终处于加载状态。它在30秒内打了大约1300个电话。这是我的密码。我无法找到为什么应用程序在无限循环中运行。
App.js
import React, { Component } from 'react';
import RootContainer from './components/RootContainer'
import {Provider} from 'react-redux'
import
浏览 3提问于2020-04-18得票数 0
我有两个组件reactjs，我创建了一个状态redux来处理这两个组件的状态。
`appcomponent.js
import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
//reducer
export function get_user(state=[], action) {
switch (action.type) {
case &
浏览 0提问于2017-11-14得票数 0
我正在尝试将一个redux项目导出为具有如下所示index.js的node_module (简化)： import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import App from './App.jsx';
const middlewares = [thunk.withExtraArgum
浏览 13提问于2019-03-13得票数 0
这是我的商店创建，我在applyMiddleware函数中应用了applyMiddleware
import { createStore, combineReducers, applyMiddleware } from 'redux'
// import { composeWithDevTools } from 'remote-redux-devtools'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import promise from &
浏览 4提问于2017-08-18得票数 0
回答已采纳
4回答
残存道具不起作用
、、
嗨，我最近在尝试Redux。我想建一个练习台。它由两个按钮(正负)和一个显示当前数字的计数器组成。
动作创建者和减速器连接到相应的组件。商店还连接到提供程序。然而，我不知道为什么，但最初的数字(状态作为道具传递给计数器组件)没有显示？
Javascript：
/*--Reducers--*/
const reducer_num = (state=0,action)=>{
switch(action.type){
case "PLUS":
case "MINUS":
return state + action.payload
浏览 6提问于2017-07-18得票数 1
回答已采纳
1回答
.created a store .created actions and reducers .connected store to my component .failed to in data in redux store
我必须使用redux将添加的事件存储在日历中，这些值不会存储在redux中。
//操作
export const saveUserEvents=(events)=>{
return {
type:'SAVE_USER_EVENTS',
payload: events
}
}
//Reducers
export co
浏览 28提问于2018-03-06得票数 0
回答已采纳
1回答
当输入被更改时，我试图更改redux的存储。我对该属性的输入如下：
onChange= {(事件，值) => {if(值){addCountry(值)console.log(国家)}
当我发送带有其值的addCountry时，国家(一个im控制台日志)是我想要更改的东西。
addCountry的操作是这样的：
export function addCountry(name) {
return {type: 'ADD_COUNTRY', payload: name }
}
我的减速机是这样工作的：
const initialState = {
countries
浏览 0提问于2021-05-24得票数 0
回答已采纳
下面有一个类似于这个的mapDispatchToProps函数。
export function mapDispatchToProps(dispatch, ownProps) {
return {
handleChangeLang: changeLocaleDispatcher(dispatch),
handleChange: handleChangeDispatcher(dispatch),
handleSubmit: handleSubmitDispatcher(dispatch)
}
}
我只是在我的项目中添加了redux-thunk，这样我就可以从我的动
浏览 10提问于2016-04-06得票数 0
回答已采纳
请帮帮忙。
this.props.store不适用于子组件。
但是连接(mapStateToProps，mapDispatchToProps) .效果很好。
为什么不能使用独生子女组件？
1.父代码(运行良好)
import React from 'react';
import ReactDOM from 'react-dom';
import { Home } from './container/home/index';
import { ChildrenComponent } from './container/childrenCom
浏览 4提问于2017-01-26得票数 0
我是新来的，我在这里显示帖子，我不理解发生了什么，我读了几篇文章，但无法解决错误
但我得到的错误是
错误:操作必须是普通对象。使用自定义中间件进行异步操作.
下面是动作减速器和存储代码，请让我知道我哪里出错了
actionPost.js
import {FETCH_POST} from '../constants/action-types';
import Axios from 'axios';
export const fetchPost=(post)=>{
浏览 0提问于2018-12-26得票数 0
1回答
在React v6升级之后，我现有的组件测试用例失败了。
下面是我的组件容器代码TodoContainer.jsx：
import { connect } from 'react-redux';
import Todo from './Todo';
import { initialLoadExecuted } from '../../actions/LoadActions';
const mapStateToProps = state => ({
isCollapsed: true,
pinnedTiles: false,
})
浏览 8提问于2019-01-10得票数 1
到目前为止，我见过的唯一示例是父数据包装器，它获取数据并将其传递给子数据。我正在使用Redux，并计划通过“connect”分发数据。仅仅为了纯粹的抓取而创建一个react无状态组件是不是一个糟糕的代码？ 示例： const jsx = (
<Provider store={store}>
<App/>
<FetchingData >
</Provider>
); export const FetchingData = props => {
useEffect(()=>Listening to datab
浏览 11提问于2019-05-23得票数 0
回答已采纳
1回答
在试图用connect()包装我的Redux时，我遇到了一些问题。考虑所有的导入都是有效的。这是源代码和输出错误。
import React, { Component } from 'react'
import { connect, bindActionCreators } from 'react-redux'
import * as counterActionCreators from '../core/actionCreators/count'
class CounterEgg extends Component {
render
浏览 3提问于2016-06-22得票数 1
回答已采纳
我有以下代码：
import React from 'react';
import ReactDOM from 'react-dom';
import rootReducer from './redux/reducers/rootReducer';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import {BrowserRouter} from 'react-router
浏览 1提问于2019-01-15得票数 2
我用的是redux和redux，还有打字稿。我试图通过connect()向组件注入一个简单的thunk动作创建者，使用mapDispatchToProps。
Actions
export enum TestActionTypes {
THUNK_ACTION = "THUNK_ACTION"
}
export interface ThunkAction {
type: TestActionTypes.THUNK_ACTION;
}
export type TestAction = ThunkAction;
动作创建者
export function thunkAct
浏览 0提问于2018-05-11得票数 13
回答已采纳
即使我已经为根组件定义了存储，我也会出现错误。
点击放大图像
即使在定义了存储之后，我也不知道为什么我会得到这个错误。
index.js (根目录)
import React, {Component} from 'react';
import {initStore} from './redux/store';
import {Provider} from 'react-redux';
import App from './App.container';
const store = initStore();
浏览 1提问于2018-04-25得票数 0
在尝试使用react-redux中的connect()函数时，我收到以下错误
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `App`.
这是App：
import { Provider } from 'react-redux';
import configureStore from './stor
浏览 0提问于2019-04-29得票数 3
const DoctorResearchArticle = props => {
console.log('props.doctor_indi_articles', props.doctor_articles); //here can able to access redux store data after triggerring the dispatch action at line no 6
const handle_edit_click = async (id) => {
await props.doctor_ind_article(id);
conso
浏览 15提问于2020-05-05得票数 0
回答已采纳
2回答
问题描述
使用react redux和params mapStateToProps，mapDispatchToProps的connect函数来设置状态和动作，组件正在成功构建，但是在组件中，动作被传递到状态而不是动作。
class Example extends Component{
constructor(state, actions){
super();
console.log(state); // object containing both state and actions
console.log(actio
浏览 0提问于2018-06-14得票数 0
2回答
目前，我在顶层只有一个容器，状态是通过树下的支柱传递的。这很快变得很麻烦，我希望有多个需要的容器组件。当我尝试这一点时，他们似乎没有连接到顶级的redux商店。
示例：
App.tsx
import * as React from 'react';
import { Provider } from 'react-redux';
import { store } from './reduxStore';
<Provider store={store}>
<PageContainer />
</Provider&g
浏览 0提问于2018-08-21得票数 1
回答已采纳
1回答
如何定义组件类型？
、、、
我正在尝试编写一个函数，该函数将Higher Order Components作为参数，并返回与redux存储连接的组件。但是这段代码的最后一行有一个类型错误。如何正确定义类型？ import React from 'react'
import { connect } from 'react-redux'
import { Dispatch } from 'redux'
import { AppState } from '~/store'
import { decrement, increment } from '~/s
浏览 24提问于2020-01-26得票数 0
回答已采纳
我是新的反应，有一个关于反应的写作风格的问题。问题是，当从redux获得状态时，这是更好的或正常的写作风格。
1)使用mapPropsToState()和getState()进行连接()
现在我使用“connect()”，因为许多教程使用“connect()”从Redux传递或获取状态。但我认为，如果这些组件有子组件，道具就必须像没有使用Redux那样传递给孩子。
它正在扼杀redux的一个优点，它可以从任何层(任何地方)获取状态。
示例代码
index.js
export let store = createStore(reducer);
<Provider store={store}
浏览 2提问于2017-01-11得票数 0
我已经试着解决这个问题好几天了，读过类似的问题，但仍然找不到问题的所在。
对于特定的操作，我得到以下错误：Actions must be plain objects. Instead, the actual type was: 'function'，但问题是:它对某些函数有效，但对另一些函数无效。
省略了一些代码以保持简短。
工作示例(onGetConnectors())
在这里，调用actions.onGetConnectors()很好，我从状态更新中接收到connectors。
CardDetail/index.js
const BoardDetailView = (pro
浏览 7提问于2022-03-02得票数 -2
回答已采纳
1回答
从Redux存储检索数据时遇到问题。Redux logger正在显示数据，但似乎无法使其呈现。下面是我的容器组件和action/reducer的代码：
//COMPONENT:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchGrade } from '../../modules/smiles';
class Main extends Component {
componentDidMount() {
浏览 0提问于2018-02-04得票数 1
1回答
我刚接触react-redux和react导航。我正在尝试建立一个简单的应用程序与MainScreen中的TextInput，用户键入他的用户名，当他按下“登录”的用户名将被保存在redux商店和导航将自动导航到"HomeScreen“。 App.js： const initialState = { username: "" };
const reducer = (state = initialState, action) => {
switch (action.type) {
case "STORE_USERNAME":
浏览 14提问于2019-12-28得票数 0
1回答
我是redux的新手，在执行下面的示例时，我无法按预期呈现输出。 App.js import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import CakeContainer from './CakeContainer'
function App(props) {
return (
<Provider store={
浏览 10提问于2020-08-15得票数 0
回答已采纳
我创建了一个示例React Native应用程序，看看是否可以让Redux-persist工作。然而，我的Redux persisted的React Native应用程序没有将状态保存到持久化存储中。
每次我将切换更改为“true”，然后重新加载应用程序时，状态都不是持久化的，而是返回到null。
当我刷新应用程序时，如何让“True”保持持久。
下面是我的代码：
index.js：
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
impo
浏览 7提问于2018-11-28得票数 2
我有一个功能强大的计数器应用程序，我正在用react-redux开发。我可以看到，每次我使用Increment/Decrement函数分派一个操作时，状态都会更新，但是，我无法实际输出状态的值。 这是我第一次尝试使用模块构建redux应用程序(而不是使用redux cdn构建html文件)。请帮我找出我做错了什么。 谢谢。 //App.js
import { Increment, Decrement } from './redux'
class App extends Component {
render() {
return (
<div
浏览 15提问于2019-01-16得票数 0
2回答
调度函数没有发生任何错误
、、、、
我正在使用react-router和react-router-redux管理我的react-router应用程序路由。
我使用以下配置设置路由器：
import {Provider} from 'react-redux'
import {Router, browserHistory} from 'react-router'
import {createStore, combineReducers} from 'redux'
import {routerReducer} from 'react-router-redux';
impo
浏览 4提问于2016-11-30得票数 0
1回答
我一直在尝试设置redux时遇到了问题，我已经设置了mapStateToProps和mapDispatchToProps，我的操作和还原器，但是每当我试图输出任何映射的道具时，我都无法从映射状态到的道具中获取任何东西。
我可以追溯到我的index.js，并尝试使用警告(store.getState())和警告(store.getState().value1)和警报(store.getState( value1 ))，因为我知道value1已经被发送，通过我的操作、减速机，然后(希望地)进入我的商店。我还尝试在mapStateToProps中使用的道具上使用警报。
我得到的唯一输出是store.
浏览 3提问于2017-09-14得票数 1
回答已采纳
1回答
无法使用mapStateToPorps、mapDispatchToProps和redux connect()通过道具访问redux存储状态/应用程序状态和操作。调用this.props.action() (其中action()是任何动作创建者)，我收到一个错误消息：
操作未定义。
我在努力找出问题出在哪里。这里的任何帮助都将不胜感激。
App.js
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as allComment
浏览 1提问于2020-01-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
