Question

我们如何在reactjs类组件中订阅redux存储？

Answer 1

这里是一个例子：

//you would do import {Provider,connect} from 'react-redux'
//  in a project but that doesn't work in snippet
const { Provider, connect } = ReactRedux;
//you would do import { createStore, applyMiddleware, compose } from 'redux';
//  in a project but that doesn't work in snippet
const { createStore, applyMiddleware, compose } = Redux;

const initialState = {
  message: '',
};
//action types
const MESSAGE = 'MESSAGE';
//action creators
const message = (message) => ({
  type: MESSAGE,
  payload: message,
});
const reducer = (state, { type, payload }) => {
  if (type === MESSAGE) {
    //return new state where message is action.payload
    return {
      ...state,
      message: payload,
    };
  }
  return state;
};
//selectors
const selectMessage = (state) => state.message;
//creating store with redux dev tools
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,
  initialState,
  composeEnhancers(
    applyMiddleware(() => (next) => (action) =>
      //middleware that does't do anything
      next(action)
    )
  )
);
//presentational app component will be connected to redux store
//  using react-redux connect
class App extends React.Component {
  render() {
    //message and setMessage come from connect
    //  see ConnectedApp
    const { message, setMessage } = this.props;
    return (
      <div>
        <h1>{message}</h1>
        <button onClick={() => setMessage('Hello World')}>
          set message
        </button>
      </div>
    );
  }
}
//connect App with redux store using react-redux connect
const ConnectedApp = connect(
  //this will set props.message value
  (state) => ({ message: selectMessage(state) }),
  //this will set props.setMessage to action creator
  //  message, when calling setMessage in component
  //  it will automatically dispatch
  { setMessage: message }
)(App);
ReactDOM.render(
  // need to wrap in react-redux Provider in order to use
  // react-redux connect or the hooks useDispatch and useSelector
  <Provider store={store}>
    <ConnectedApp />
  </Provider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>

<div id="root"></div>

Answer 2

first of all --
     npm install --save react-redux redux react-thunk
second -
     You should be build action, reducer folder for redux.
example :
     Redux/action/action.js.
     Redux/reducer/index.js.
     Redux/store.js
This is store.js sample code
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducer";

const initialState = {};
const middleware = [thunk];

const store = createStore(
    rootReducer,
    initialState,
    compose(
        applyMiddleware(...middleware),
   )
);

导出默认存储；

如何在reactjs组件中订阅Redux Store？

2 个答案: