Javascript 如何在不使用路由的情况下从react访问特定的reducer变量作为道具
我正在开发react redux应用程序,我可以通过路由访问减速机。现在,我面临着在不使用路径的情况下使用特定减速器的麻烦 这是我的reducers.js:Javascript 如何在不使用路由的情况下从react访问特定的reducer变量作为道具,javascript,reactjs,redux,Javascript,Reactjs,Redux,我正在开发react redux应用程序,我可以通过路由访问减速机。现在,我面临着在不使用路径的情况下使用特定减速器的麻烦 这是我的reducers.js: const initialState = { loading: false, topics: [] }; export default createReducer(initialState, { [LOADING_DATA]: (state, action) => { return Object.assign({
const initialState = {
loading: false,
topics: []
};
export default createReducer(initialState, {
[LOADING_DATA]: (state, action) => {
return Object.assign({}, state, {
loading: action.loading
});
}
});
这是我的actions.js:
export function loading (loading) {
return {
type: LOADING_DATA,
payload: {loading}
};
}
这就是我的组件上的内容:
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux';
import * as moduleActionCreators from '...';
import * as actionCreators from '...';
class MyComponent extends Component {
...
render () {
return (<div>
...
</div>;
}
}
const mapStateToProps = (state) => ({
});
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(Object.assign({}, moduleActionCreators, actionCreators), dispatch)
});
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
从'react redux'导入{connect}
从“redux”导入{bindActionCreators};
从“…”导入*作为ModuleActionCreator;
从“…”导入*作为ActionCreator;
类MyComponent扩展组件{
...
渲染(){
返回(
...
;
}
}
常量mapStateToProps=(状态)=>({
});
const mapDispatchToProps=(调度)=>({
操作:bindActionCreators(Object.assign({},moduleActionCreators,actionCreators),dispatch)
});
导出默认连接(MapStateTrops、mapDispatchToProps)(MyComponent);
通常在mapStateToProps
中,我将减速器变量引用为加载:状态['my_reference\u to_reducer']。加载
,但我不知道如何告诉组件引用my reducers.js以获得加载
请允许我解释一下。您需要在MapStateTrops函数中设置状态,以便访问它:
const mapStateToProps = (state) => {
return {
loading: state.loading
}
}
然后您应该能够将其用作MyComponent中的this.props.loading
您的减速器可以如下所示:
export default function reducer(state = {}, action) {
switch(action.type) {
case 'LOADING_DATA':
return Object.assign({}, state, {
...state,
loading: action.payload.loading
})
我建议您使用redux ducks模式,因为它将动作创建者和还原者保持在同一个文件中,节省了您的时间,并使其更易于阅读和使用。例如:
加载.js
// Actions
const LOADING_DATA = 'LOADING_DATA'
// Action Creators
export const loadingData = (data) => {
return {
type: LOADING_DATA,
payload: {
loading: data
}
}
}
// Reducer
export default function reducer(state = {
loading: 'DATA zeroed'
}, action) {
switch(action.type) {
case 'LOADING_DATA':
return Object.assign({}, state, {
...state,
loading: action.payload.loading
})
default:
return state
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import configureStore from './configureStore'
const store = configureStore()
ReactDOM.render(
<MyComponent store={store}/>,
document.getElementById('root')
);
import { createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import loadingData from './loading'
const configureStore = () => {
return createStore(loadingData, composeWithDevTools())
}
export default configureStore
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { loadingData } from './loading';
class MyComponent extends Component {
constructor(props){
super(props)
this.onLoadingData = this.onLoadingData.bind(this)
}
componentDidMount() {
this.props.loadingData('no more undefined')
}
onLoadingData() {
this.props.loadingData('DATA')
}
render() {
console.log(this.props.loading)
return (
<div>
<h2>MyComponent</h2>
<button onClick={this.onLoadingData}>Load Data</button>
<p>{this.props.loading}</p>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
loading: state.loading
}
}
const mapDispatchToProps = {
loadingData
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(MyComponent)
index.js
// Actions
const LOADING_DATA = 'LOADING_DATA'
// Action Creators
export const loadingData = (data) => {
return {
type: LOADING_DATA,
payload: {
loading: data
}
}
}
// Reducer
export default function reducer(state = {
loading: 'DATA zeroed'
}, action) {
switch(action.type) {
case 'LOADING_DATA':
return Object.assign({}, state, {
...state,
loading: action.payload.loading
})
default:
return state
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import configureStore from './configureStore'
const store = configureStore()
ReactDOM.render(
<MyComponent store={store}/>,
document.getElementById('root')
);
import { createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import loadingData from './loading'
const configureStore = () => {
return createStore(loadingData, composeWithDevTools())
}
export default configureStore
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { loadingData } from './loading';
class MyComponent extends Component {
constructor(props){
super(props)
this.onLoadingData = this.onLoadingData.bind(this)
}
componentDidMount() {
this.props.loadingData('no more undefined')
}
onLoadingData() {
this.props.loadingData('DATA')
}
render() {
console.log(this.props.loading)
return (
<div>
<h2>MyComponent</h2>
<button onClick={this.onLoadingData}>Load Data</button>
<p>{this.props.loading}</p>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
loading: state.loading
}
}
const mapDispatchToProps = {
loadingData
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(MyComponent)
MyComponent.js
// Actions
const LOADING_DATA = 'LOADING_DATA'
// Action Creators
export const loadingData = (data) => {
return {
type: LOADING_DATA,
payload: {
loading: data
}
}
}
// Reducer
export default function reducer(state = {
loading: 'DATA zeroed'
}, action) {
switch(action.type) {
case 'LOADING_DATA':
return Object.assign({}, state, {
...state,
loading: action.payload.loading
})
default:
return state
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import configureStore from './configureStore'
const store = configureStore()
ReactDOM.render(
<MyComponent store={store}/>,
document.getElementById('root')
);
import { createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import loadingData from './loading'
const configureStore = () => {
return createStore(loadingData, composeWithDevTools())
}
export default configureStore
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { loadingData } from './loading';
class MyComponent extends Component {
constructor(props){
super(props)
this.onLoadingData = this.onLoadingData.bind(this)
}
componentDidMount() {
this.props.loadingData('no more undefined')
}
onLoadingData() {
this.props.loadingData('DATA')
}
render() {
console.log(this.props.loading)
return (
<div>
<h2>MyComponent</h2>
<button onClick={this.onLoadingData}>Load Data</button>
<p>{this.props.loading}</p>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
loading: state.loading
}
}
const mapDispatchToProps = {
loadingData
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(MyComponent)
import React,{Component}来自'React';
从'react redux'导入{connect};
从“/loading”导入{loadingData};
类MyComponent扩展组件{
建造师(道具){
超级(道具)
this.onLoadingData=this.onLoadingData.bind(this)
}
componentDidMount(){
this.props.loadingData('不再有未定义的')
}
onLoadingData(){
this.props.loadingData('DATA'))
}
render(){
console.log(this.props.load)
返回(
真菌成分
加载数据
{this.props.load}
);
}
}
常量mapStateToProps=(状态)=>{
返回{
加载:state.loading
}
}
const mapDispatchToProps={
加载数据
}
导出默认连接(
MapStateTops,
mapDispatchToProps
)(MyComponent)
您建议的方式是,this.props.loading未定义…我已尝试注入reducer…未成功您可以尝试在我使用action creator和reducer在编辑中添加时创建一个ducks模块文件,并在导入后重试吗?我正在进行此操作…我将在测试后尽快返回它对我无效…加载仍然有效l未定义没问题,我只是需要更多的时间。顺便说一句,你有太多叫做“加载”的东西,我需要更改它们的名称才能访问它们:)