我的 React redux 应用程序有什么问题，因为它没有按预期呈现内容？

Question

我开始使用 redux 并且只是为了测试我开始使用 combineReducers 来进行更结构化的设计，但它的工作原理并不像每个人一样 suggested.I 一直在摸索着我的方法有什么问题，因为我遵循了他们官方网站上的每一个要点。

index.js

import React from 'react';
import {createStore}  from 'redux';
import {Provider} from 'react-redux';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reducer from './reducer';
import Welcome from './Components/Welcome';

const store=createStore(reducer);

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

Welcome.js 文件

import React from 'react'
import {connect} from 'react-redux';
import {FIRST} from '../Actions';
function Welcome({count,dispatch})   {
    dispatch({type:FIRST});
    return (
        <div>
            <h1> Wow it's great {count}</h1>
        </div>
    )
}

const mapStateToProps=(store) =>({
count:store.count
})

export default connect(mapStateToProps)(Welcome);

loginsearch.js

import {FIRST} from './Actions';
const initialstore={
    count:1,
    total:1
}

function loginreducer(state=initialstore,action)
{
if(action.type === FIRST)
{ 
  return{...state,count:0};
}
return state;
}

export default loginreducer;

searchreducer.js

const initialstore={
item:1,
search:1
}


function searchreducer(state=initialstore,action)
{
    return state;
}
export default searchreducer;

reducer.js

import {combineReducers} from 'redux';
import  loginreducer from './loginreducer';
import searchreducer from './searchreducer';

export default combineReducers({
loginreducer,
searchreducer
})

当我 console.log(count) 在 Welcome.js 之后 dispatch({type:FIRST})

我得到了未定义，但是在应用程序中我应该得到 Wow it's great 0

Answer 1

问题是，你组合了 reducer，但是当从 mapStateToProps 调用状态时，你忘记添加你实际引用的是哪个 reducer，所以你得到了未定义。

我给你的 reducers 添加了键，这样在外面调用就容易多了。并更新了 mapStateToProps

这是解决您的问题的示例，

/*reducer.js*/
import {combineReducers} from 'redux';
import  loginreducer from './loginreducer';
import searchreducer from './searchreducer';

export default combineReducers({
lr: loginreducer, // <== Check this line
sr: searchreducer // <== Check this line
})


/*welcome.js*/
const mapStateToProps=(store) =>({
count:store.lr.count, // <== Check this line
})

export default connect(mapStateToProps)(Welcome);

我的 React redux 应用程序有什么问题，因为它没有按预期呈现内容？

What's wrong in my react redux application ,as it's not rendering things as expected?

reactjs

redux

react-redux

redux-reducers