Question

当我更改输入文本值并单击“保存”按钮时， “类别名称”将被更改。

CategoryName.js

class CategoryName extends Component {

        render() {
                return (
                    <>  
                       <section className="CategoryName">
                          <div>
                             <div>{this.props.categoryName}</div>
                          </div>
                       </section>
                    </>
                )
        }
 }

// react-redux 
const mapStateToProps = (state) => {
    console.log(state.categoryName);
    return {categoryName: state.categoryName}
};

export default connect(mapStateToProps)(CategoryName);

/CategoryName/index.js

import {re_modifyCategoryName} from './reducers/index.js'

const store = createStore(re_modifyCategoryName)

class CategoryList extends Component {
    render() {
        return(
            <>
               <div>
                   <Provider store ={store}>
                      <CategoryName />
                   </Provider>
                   <Provider store ={store}>
                      <CategoryName />
                   </Provider>
               </div>
           </>
        )
    }
}
export {CategoryList}

/reducers/index.js

import * as types from '../actions/ActionTypes';

var initialState = {
    categoryName: 'default name in redux'
};



function re_modifyCategoryName(state=initialState, action) {
    switch(action.type) {
        case types.MODIFY_CATEGORY_NAME :
            return {
                ...state,
                categoryName : action.categoryName,
            }

        default:
            return state;

    }
}

export {re_modifyCategoryName}

ModifyCategoryName.js

class ModifyCategoryName extends Component {

    state = {
        categoryName : "default name",
    }



    _saveModifyCategoryName = () => {

        this.props.onModifyCategoryName(this.state.categoryName)
    }

    _onChange = (e) => {
        this.setState({
            categoryName : e.target.value
        })
    }

    render(){
        return (
            <>
                <div className="ModifyCategoryName">
                    <div className="ModifyCategoryNameWrapper">
                        <div>
                            <div>
                                Header
                            </div>
                            <div>
                                <input className="ModifyCategoryNameInput" type="text" onChange={this._onChange} />
                            </div>
                            <div>
                                <button onClick={this._saveModifyCategoryName}>save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

const mapDispatchToProps = (dispatch) => ({

    onModifyCategoryName: (categoryName) => {
        dispatch(actions.modifyCategoryName(categoryName))
    }
})

export default connect(null, mapDispatchToProps)(ModifyCategoryName)

/ModifyCategoryName/index.js

import {re_modifyCategoryName} from './reducers/index.js'

const store = createStore(re_modifyCategoryName)


ReactDOM.render(
<Provider store={store}>
    <ModifyCategoryName />
</Provider>, document.getElementById('modify-category-name-modal'))

/actions/index.js

import * as types from './ActionTypes';

export const modifyCategoryName = (categoryName) => ({
    type: types.MODIFY_CATEGORY_NAME,
    categoryName
});

因为当我第一次绘制console.log(state.categoryName)（即{{1}）的const mapStateToProps时，我在 CategoryName.js 的'default name in redux'中插入了initialState.categoryName {1}}显示在控制台中，redux store显示在 CategoryName.js 中。我认为这证明{this.props.categoryName}与 CategoryName.js 连接良好。

此外，当我将文本redux store编写为输入的新文本值并单击“保存”按钮时，然后在 ModifyCategoryName.js 的'change category name'中调度（操作）将被触发，并且_saveModifyCategoryName将更改redux存储的状态。如果您从我的redux-dev-tool中看到此，则可以检查reducer是否已更改为'default category name'。我认为这证明'change category name'和dispatch(action)很好。

但是，如上图所示，redux的状态已更新，但是mapStateToProps没有被调用。确实，redux update中的console.log(state.categoryName)在首次呈现页面时被调用，但是即使尽管mapStateToProps已更改，但 CategoryName.js

的state of redux和console中未显示任何更改

我怎么了？

Answer 1

我真是愚蠢。

我必须在组件树的顶部使用<Provider store ={store} /><Provider />。但是，我没有。.然后new components提取的connect(mapStateToProps, mapDispatchToProps)与redux store并不相同。

更新了Redux状态，但未调用mapStateToProps

1 个答案: