Redux -- Redux 初识 Store、配合 redux 实现状态管理

Redux 初识 Store、配合 redux 实现状态管理

• redux官方文档
• 安装所依赖的模块(公用的)：cnpm i redux
• 安装所依赖的模块(在react中使用)：cnpm i redux react-redux
• 安装所依赖的模块(提供中间件，本节内容选它)：cnpm i redux react-redux redux-thunk
• Store 就是保存数据的地方，可以把它看成一个容器，整个应用只能有一个 Store

1、根组件App.js里，用一个容器把根组件包裹起来

• 先引入：import {Provider} from 'react-redux';
• 使用 Provider 包含所有组件
• React-Redux 提供 Provider 组件，可以让容器组件拿到 state。 所以，这里的 Provider 就拿到了根组件的全部 state
• 创建 store，参考redux官方文档
• createStore 相关参数

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Posts from "./components/Posts";
import PostForm from "./components/PostForm";
import {Provider} from 'react-redux';
import {createStore,applyMiddleware} from 'redux';


//创建store并在上头引入
const store = createStore(() => [],{},applyMiddleware())

function App() {
  return (
      //使用Provider
      <Provider store={store}>
          <div className="App">
              <header className="App-header">
                  <img src={logo} className="App-logo" alt="logo" />
                  <p>
                      Edit <code>src/App.js</code> and save to reload.
                  </p>
                  <a
                      className="App-link"
                      href="https://reactjs.org"
                      target="_blank"
                      rel="noopener noreferrer"
                  >
                      Learn React
                  </a>
              </header>
              <PostForm/> {/*使用 */}
              <Posts/>  {/*使用 */}
          </div>
      </Provider>
  );
}

export default App;

2、代码抽离

• 在 src 下新建 store.js文件
• 将App.js 里的某些东西剪切过来
• 引入thunk 到store.js
• 在App.js里避免报错，引入store

//App.js里面引入
import {store} from './store';

查看代码

  
//store.js里
import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
const initialState = {};

const middleware = [thunk];
//创建Store并在上头引入

export const store = createStore(() => [],initialState,applyMiddleware(...middleware))