Question

我创建了一个create react应用，并在其中包含了卡片列表的redux和一个显示过滤结果的搜索框，在添加redux之前，该应用已正常运行，但现在它不返回任何结果。当我console.log（this.props.store）时，它返回未定义。如果有人可以帮助我，我将非常感激。我的文件如下：

constants.js

export const CHANGE_SEARCH_FIELD = 'CHANGE_SEARCH_FIELD';

actions.js

import {CHANGE_SEARCH_FIELD} from './constants.js';

export const setSearchField = (text) => ({
       type: CHANGE_SEARCH_FIELD,
       payload: text
})

reducer.js

import {CHANGE_SEARCH_FIELD} from './constants.js';

const intialState = {
    searchField: ''
}

export const searchTeacher = (state=intialState, action={}) => {
    switch(action.type) {
        case CHANGE_SEARCH_FIELD:
                return Object.assign({}, state, { searchField: action.payload });
        default: 
                return state;
    }
}

index.js

import ReactDOM from 'react-dom';
import './index.css';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import App from './App.js'; //Our main parent component
import {searchTeacher} from './reducer.js';
import 'tachyons';
import * as serviceWorker from './serviceWorker';

const store = createStore(searchTeacher)

ReactDOM.render(
     <Provider store={store}>
         <App />
     </Provider>,
  document.getElementById('root') );

serviceWorker.unregister();

App.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import CardList from './CardList.js';
import {teacher} from './teacher.js';
import Searchbox from './searchbox.js';
import ErrorBoundry from './ErrorBoundry';
import Scroll from './Scroll.js';
import './App.css';
import {setSearchField} from './actions.js';

const mapStateToProps = state => {
    return {
        searchField: state.searchField
    }
}

const mapDispatchToProps = (dispatch) => {

    return {
        onSearchChange: (event) => dispatch(setSearchField(event.target.value))
    }
}

class App extends Component {

    constructor(){   
         super()
         this.state = {
         teacher: teacher, //teacher: [],  
        }
    }

    render(){
        console.log(this.props.store);
        const { searchField, onSearchchange } = this.props; 
        const filteredteacher= teacher.filter( 
            teacher =>{
                         return teacher.name.toLowerCase().includes(searchField.toLowerCase()); 
                      });
        return(
            <div className="tc">  
              <h1 className="f1"> Faculty Members ! </h1>
              <Searchbox searchChange={onSearchchange} /> 
              <Scroll>
                <ErrorBoundry>
                 <CardList teacher={filteredteacher} />
                </ErrorBoundry> 
              </Scroll>
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

不会有任何props.store，因为您的代码都没有将名为store的prop传递给该组件。

包裹在connect中的组件可以从以下三个来源获得道具：

从上级组件传递的道具
从mapState返回的道具
从mapDispatch返回的道具

在这种情况下，mapState返回{searchField}，而mapDispatch返回{onSearchChange}，并且父级没有道具。因此，组合的道具为{searchField, onSearchChange}。

请注意，您应该使用the "object shorthand" form of mapDispatch而不是将其编写为函数：

const mapDispatch = {onSearchChange: setSearchField};

Answer 2

您将根据您的代码从redux中获得两个道具，

this.props.searchField
this.props.onSearchChange

react-redux的连接功能，用于连接react和redux。

mapDispatch is used to dispatch your actions which hold the payload(Second argument of connect function)

mapState is used to get the state of your properties(First argument of connect function)

因此在您的代码中，没有任何名为store的道具，Store是可以通过此方法Store.getState()获得的全局redux状态，但是这里store是您要在此处传递的redux store {{1} } const store = createStore(searchTeacher)文件中，将显示redux存储的整个状态。

这是获取商店状态的方法。

How do I access store state in React Redux?

您将在on change方法中分派一个名为index.js的操作，如下所示。

onSearchChange

在将redux存储在名称为this.props.onSearchChange(e)的reducer中后，redux会返回此值。

Answer 3

this.props.store仅在从父组件传递下来的情况下才可以访问（在此不做此操作）

您在index.js中创建了商店，但没有向其公开接口。

const store = createStore(searchTeacher);

您可以从index.js文件中公开这些功能以引用商店：

export const getStore = () => store;
export const getState = () => {  return store.getState(); };

然后从其他任何地方（尽管不是很好的做法）：

import { getStore, getState } from 'index.js';

console.log（this.props.store）在我的create react应用程序中返回未定义？

3 个答案: