从单独的文件中导入状态

Question

感谢您的阅读...

我正在尝试学习 redux，现在我已经在单独的文件中声明了状态。

在 store.js 上，我有一个状态，我想将它传递给我的减速器之一，但它无法正常工作，也无法在 redux 开发工具上检测到...

这是 store.js 中的代码

import {createStore} from 'redux';
import uuid from 'uuid/v4';
import myReducers from './reducers';

const initialState = {
    todos: [
        {
            id: uuid(),
            name: "Go to the gym",
            completed: false
        },
        {
            id: uuid(),
            name: "Pick Milk at the Market",
            completed: false
        }
    ]
};

const store = createStore(
    myReducers,
    initialState,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

这是来自 app.js 的代码

import React from 'react';
import {Provider} from 'react-redux';
import store from './store'
import './App.css';
import TodoList from './components/TodoList';
import TodoInput from './components/TodoInput';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <h2>React + Redux woth Hooks</h2>
        <TodoList />
        <TodoInput />
      </div>
    </Provider>
  );
}

export default App;

终于来了reducer...

import {ADD_TODO, TOGGLE_TODO, DELETE_TODO} from '../actions/types';
import uuid from 'uuid/v4';

const initialState = {
    todos : [
        {
            id: uuid(),
            name : '',
            completed : false
        }
    ]
}

export default function(state = initialState, action){
    switch (action.type) {
        case ADD_TODO: 
            return {
                ...state,
                todos: [...state.todos, action.payload]
            }

        case TOGGLE_TODO : 
        return {
            ...state,
            todos: state.todos.map( todo => (todo.id === action.payload) ? {...todo, completed: !todo.completed} : todo)
        }
        case DELETE_TODO :
            return {
                ...state,
                todos: state.todos.filter(todo => todo.id !== action.payload)
            }
        default : return state;
    }
}

这是 reducers 文件夹中的 index.js，以防万一……

import {combineReducers} from 'redux';
import myReducers from "./postReducers";


const allReducers = combineReducers({
    posts : myReducers
});


export default allReducers;

---

在这一点上任何帮助将不胜感激

Answer 1

将<Provider />移动到项目根目录（index.js）

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

在任何需要访问状态的组件中，使用 react-redux 的 connect 或 useSelector（用于功能组件）。

// App.js
  export default function App() {
  let posts = useSelector(state => state.posts);

  console.log("++ posts: ", posts);
  return (
    <div className="App">
      <h2>React + Redux woth Hooks</h2>
      {/* <TodoList />
        <TodoInput /> */}
    </div>
  );
}