{"id":24511627,"url":"https://github.com/dacejs/dace-plugin-redux","last_synced_at":"2025-07-31T08:05:35.193Z","repository":{"id":32825800,"uuid":"143688049","full_name":"dacejs/dace-plugin-redux","owner":"dacejs","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-04T21:37:19.000Z","size":3204,"stargazers_count":0,"open_issues_count":23,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-22T05:04:22.282Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dacejs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-06T06:52:39.000Z","updated_at":"2020-05-12T01:42:47.000Z","dependencies_parsed_at":"2023-01-14T22:21:27.722Z","dependency_job_id":null,"html_url":"https://github.com/dacejs/dace-plugin-redux","commit_stats":null,"previous_names":[],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dacejs%2Fdace-plugin-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dacejs%2Fdace-plugin-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dacejs%2Fdace-plugin-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dacejs%2Fdace-plugin-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dacejs","download_url":"https://codeload.github.com/dacejs/dace-plugin-redux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243713390,"owners_count":20335566,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-22T00:39:20.405Z","updated_at":"2025-03-15T09:44:14.452Z","avatar_url":"https://github.com/dacejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dace-plugin-redux\n\n该插件让 redux 和 dace 能一起工作。\n\n插件不带数据缓存功能，开发者根据实际业务需求自己来设定缓存策略。\n\n## 安装\n```\nnpm i dace-plugin-redux\n```\n\n## 用法\n\n在 `dace.config.js` 的插件中添加配置：\n\n```js\nmodule.exports = {\n  plugins: ['redux']\n};\n```\n\n## 参数\n\n**特别注意**\n\n`middlewares` 参数中的 js 代码目前只支持 `ES5` 语法。\n\n### 使用封装好的 redux 中间件\n\n```js\n// 创建 axios 实例的文件路径\nDACE_AXIOS_INSTANCE_PATH: 'src/axios.js',\n\n// 加上 dace-plugin-redux\nplugins: [\n  ['redux', {\n    middlewares: [ `require('redux-logger').default` ]\n  }]\n]\n```\n\n### 直接在配置中书写 redux 中间件\n\n```js\nplugins: [\n  ['redux', {\n    middlewares: [\n      `function() {\n        const createLogger = require('redux-logger').createLogger;\n        return createLogger();\n      }()`\n    ]\n  }]\n]\n```\n\n## API\n\n### getInitialProps 方法\n\n#### 参数\ngetInitialProps 接收的上下文对象中除了[默认参数](api/get-initial-props.md)外，增加了 `store` ：\n\n- store：这个参数是通过 redux 的 createStore 创建的 store 实例，详情请查阅 [redux 官方文档](https://redux.js.org/api/store)。\n\n### `@getInitialProps` 装饰器\n\n\u003e非 redux 技术推荐直接使用 `getInitialProps` 静态方法。\n\n该装饰器主要是为了简化页面组件的编程，让代码看起来更简洁。装饰器做了两件事情：\n\n- 在两端（服务器端、浏览器端）渲染时，分别执行 injectReducer 来注入页面相关的 reducer。\n- 为页面组件绑定静态方法 `getInitialProps`。\n\n#### 参数\n`@getInitialProps` 接收一个对象参数，对象参数包含以下属性：\n\n- reducer：和页面 action 相关的 reducer 。\n- promise：需要绑定到静态方法 `getInitialProps` 的内容。\n  - promise.store：页面的 store 对象。\n    - promise.store.api：store 对象除了 `dispatch()` 和 `getState()` 等常用方法外，还会增加 `api` ，它是一个  `axios` 实例，axios.baseURL 取环境变量中的 `DACE_API_BASE_URL`，当 `DACE_API_BASE_URL` 为空时，axios.baseURL 取当前域名。当采用服务器端渲染时，`api` 会透传 request headers 的所有信息。\n  - promise.query：网址中的 query string。\n\n```js\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { Link } from 'dace';\nimport { getInitialProps } from 'dace-plugin-redux';\nimport { fetchPosts } from './action';\nimport reducer from './reducer';\nimport Layout from '../../layouts/default';\n\n@getInitialProps({\n  reducer,\n  promise: ({ store }) =\u003e store.dispatch(fetchPosts())\n})\n@connect(state =\u003e state)\nexport default class Index extends Component {\n  static propTypes = {\n    posts: PropTypes.arrayOf(PropTypes.shape({\n      id: PropTypes.number,\n      title: PropTypes.string\n    }))\n  };\n\n  static defaultProps = {\n    posts: []\n  }\n\n  render() {\n    return (\n      \u003cLayout\u003e\n        \u003ch1\u003ePost List\u003c/h1\u003e\n        \u003col\u003e\n          {\n            this.props.posts.map(post =\u003e (\n              \u003cli key={post.id}\u003e\n                \u003cLink to={`/post/${post.id}`}\u003e{post.title}\u003c/Link\u003e\n              \u003c/li\u003e\n            ))\n          }\n        \u003c/ol\u003e\n      \u003c/Layout\u003e\n    );\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdacejs%2Fdace-plugin-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdacejs%2Fdace-plugin-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdacejs%2Fdace-plugin-redux/lists"}