Question

我正在尝试使用来自here的react和redux来创建类似于todo应用程序的东西。我一直在阅读这个问题的所有解决方案，似乎对我的情况没有任何效果。

大多数解决方案都是使用我已经使用的提供商。非常感谢任何帮助。

编辑 - 片段中可能缺少很少的import语句，但是在需要时会导入所有组件，并且还会在操作文件中定义操作。

Index.js

＆＃13;

import App from './components/App'
import reducer from './reducers/index'

const store = createStore(reducer)

const AppWithStore = (
  <Provider store={store}>
    <App />
  </Provider>
)

ReactDOM.render(AppWithStore, document.getElementById('root'))

＆＃13;

更新 - 合并减速机代码

＆＃13;

import React from 'react'
import { combineReducers } from 'redux'

import TestReducer from './TestReducer'

export default combineReducers({
	TestReducer,
})

＆＃13;

App.js

＆＃13;

import Test from './Test';
class App extends Component {
  render() {
    return (
      <Test />
    );}
}

ReactDOM.render(
    (<App/>),
    document.getElementById("root")
);

export default App

＆＃13;

Test.js包含组件和容器

＆＃13;

import { connect } from 'react-redux'
import { add } from '../actions'

const mapStateToProps = state => ({
  todos: state.todos,
})

class Test extends Component {
  dosomething() {
    const dispatch = this.props;
    dispatch(add("New Note"));
  }
  render() {
    return (
    <div>
      < button OnClick = { this.dosomething.bind(this)} > Test </button> 
      </div>
    )
  }
}

export default connect(mapStateToProps)(Test)

＆＃13;

Test的reducer逻辑如下所示

＆＃13;

import React from 'react';

const TestReducer = (state = [], action) => {
    const todos = state;
    const {type, payload} = action;

    switch(action.type){
        case 'ADD': {
            return {
                ...state,
                todos:"new todo"
            }
        }
    }
    return state;
}

export default TestReducer

＆＃13;

Answer 1

你应该删除

ReactDOM.render(
    (<App/>),
    document.getElementById("root")
); from App.js file

当你在App.js中再次调用它时，会创建一个独立于其他组件的新组件实例，这就是它找不到store的原因。因为商店没有传递给它。

您可以在https://codesandbox.io/s/vy7wwqw570查看。因为我从app.js中删除了渲染api调用，所以它现在正在运行。

Answer 2

您需要导入缩减器以便

如果您的文件名是TestReducer.js

import React from 'react';
export const TestReducer = (state = [], action) => {
  const todos = state;
  const {type, payload} = action;

  switch(action.type){
    case 'ADD': {
        return {
            ...state,
            todos:"new todo"
        }
    }
  }
  return state;
 }

然后以这种方式导入

import {TestReducer} from './TestReducer.js';
const store = createStore(TestReducer);

Answer 3

尝试用todos替换todos：state.todos：state.TestReducer.todos

import { connect } from 'react-redux'
import { add } from '../actions'

const mapStateToProps = state => ({
  //todos: state.todos,
  todos: state.TestReducer.todos
})

class Test extends Component {
  dosomething() {
    const dispatch = this.props;
    dispatch(add("New Note"));
  }
  render() {
    return (
    <div>
      < button OnClick = { this.dosomething.bind(this)} > Test </button> 
      </div>
    )
  }
}

export default connect(mapStateToProps)(Test)

无法在连接网站redux错误的上下文或道具中找到商店

3 个答案: